Frontend>Questions

Where do i learn the skills to create this

Sally_san

Sally_san

Where do i learn the skills to create this

So I’ve got a client that wants to build a site like this:

Specifically 3 things from the website:

  1. The fullscreen sections that change as you scroll (meaning it does a full section on 1 scroll rather than moving the screen down slightly)
  2. The animations when a new section is scrolled to (Meaning it doesn’t look like it scrolls down)
  3. The horizontal scrolling when it reach’s the work section (he wants 1 section to switch to horizontal scrolling as you reach it then switch back from it)

Any articles or tutorials that could teach me this?

8 comments
#question#help-needed
23 1262 8

Marked As Solved

GermaVinsmoke

GermaVinsmoke

  1. Maybe it is CSS scroll snap
  2. GSAP can be used for these types of animation

You can also install Wappalyzer chrome extension to check what all technologies the website is using.

5
Post #3

Also Liked

OvermindDL1

OvermindDL1

That site is using unholy huge amounts of javascript, not very good at that dare I say, it’s way too heavy… o.O

Depending on what precisely you want to do then all/most of that can be done in CSS, might need javascript for some of it, though not near to the crazy extent that that site uses it…

2
Post #4
GermaVinsmoke

GermaVinsmoke

It’s made in Webflow :joy: :rofl: :rofl:

2
Post #5
Sally_san

Sally_san

Thanks I’m learning gsap its pretty cool. Im a while away from creating something like that though

2
Post #6

Where Next?

View thread on forum
question
help-needed
Home Frontend>Questions
#question#help-needed
23 1262 8
Last post

Popular Frontend topics Top

dasdom
Frontend>Questions

What are the main reasons to use a CSS framework?
#css-frameworks
6 1069 1
New
beberardinelli
Frontend>Questions

Debugging tools for coders?
Hi! I just started coding a few months ago and I am trying to get all the help I can get. My friend showed me this debugging tool called...
#tech-news-source#coder
5 1010 1
New
david-j-m
Frontend>Questions

Svelte reset sidebar scroll to top when content changes
Hi, have a svelte spa gallery site - repl here. Have a couple of category buttons - Oil on Canvas and WaterColor… Sidebar contains all im...
#reset-sidebar-content
1 1036 0
New
sona11
Frontend>Questions

In Java, convert a string array to a jagged array
I have a 1D array of numbers and need help splitting them into groups using a jagged array so that I can perform a series of computations...
/java
5 1119 2
New
Fl4m3Ph03n1x
Frontend>Questions

Fresh new 1.7 Phoenix app inside umbrella fails build
Background I have a fresh umbrella app and I am trying to create a Phoenix app inside it. However, even though I can create the Phoenix a...
/elixir/phoenix/tailwind
2 1249 1
New
Fl4m3Ph03n1x
Frontend>Questions

Enable/disable a button in Phoenix 1.7 depending on state
Background I have a button that may be disabled or not, depending on a set of conditions. I want to disable/enable the button without hav...
/elixir/phoenix#liveview
2 1325 1
New
Fl4m3Ph03n1x
Frontend>Questions

Cannot launch Elixir Desktop app when MIX_ENV=test
Background I have Phoenix umbrella application. When inside said application, I can run it without issues if MIX_ENV=prod. However, if I ...
/elixir/phoenix#desktop#liveview
2 856 1
New
gameengineer
Frontend>Questions

Correct thread-safe way to share a resource using Android Studio, kotlin and java?
We are developing on Samsung Tab Active 4 Pro using Android Studio, kotlin and java. We are getting what we think are app deadlocks. The ...
#tablets
1 930 0
New
avipal
Frontend>Questions

Need help on deploying APK into google playstore, with multiple versions with same package name
I have an application where it is three layer 1st layer- A legacy core routines 2nd layer- built on top of the Core routine using Dotno...
#apk
1 582 0
New
jaeyson
Frontend>Questions

Bad idea to learn React?
would it be backwards if I’m learning react? last time I used UI library (aside from LiveView) was Elm (not much) and that was eons ago.
/elixir/phoenix/react
4 439 2
New

Other popular topics Top

PragmaticBookshelf
General Dev>Learning Resources

Seven More Languages in Seven Weeks
Learn from the award-winning programming series that inspired the Elixir language, and go on a step-by-step journey through the most impo...
pragprog.com
#pragprog/elixir/julia/lua#published-book#factor/elm#minikanren/idris/book-seven-more-languages-in-seven-weeks
4 5862 0
New
brentjanderson
General Dev>Hardware

Moonlander Keyboard (Mechanical) (Ergonomic) (Split) (Ortholinear)
Bought the Moonlander mechanical keyboard. Cherry Brown MX switches. Arms and wrists have been hurting enough that it’s time I did someth...
#hardware/keyboards#moonlander#mechanical-keyboards#ortholinear#ergonomic
212 17779 90
New
AstonJ
General Dev>Hardware

Seen any cool new keyboards?
We have a thread about the keyboards we have, but what about nice keyboards we come across that we want? If you have seen any that look n...
/keyboards#mechanical-keyboards
49 5910 39
New
DevotionGeo
General Dev>Code Editors

Dendron: a personal knowledge management tool on top of VSCode
/vscode#visual-studio-code
30 7372 9
New
AstonJ
General Dev>Hardware

Planck vs Preonic vs Subatomic (Keyboards)
I ended up cancelling my Moonlander order as I think it’s just going to be a bit too bulky for me. I think the Planck and the Preonic (o...
/keyboards#mechanical-keyboards#ortholinear#planck#preonic
105 17596 47
New
PragmaticBookshelf
Backend>Learning Resources

Programming Phoenix LiveView
Build highly interactive applications without ever leaving Elixir, the way the experts do. Let LiveView take care of performance, scalabi...
pragprog.com
#pragprog/elixir/phoenix#published-book/book-programming-phoenix-liveview
80 9318 24
New
husaindevelop
Android>Questions

Clipboard readtext not working in android webview
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
#android#clipboard
1 5651 0
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: VM Brasseur (Author) Interview and AMA!
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
#author-spotlight/book-forge-your-future-with-open-source
16 5051 11
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Bruce Tate (Author) Interview and AMA!
Author Spotlight: Bruce Tate @redrapids Programming languages always emerge out of need, and if that’s not always true, they’re defin...
/elixir/ruby/phoenix/book-seven-more-languages-in-seven-weeks/book-seven-languages-in-seven-weeks#liveview/book-programming-phoenix-liveview
54 5678 23
New
First poster: AstonJ
General Dev>In The News

Jan: An open source alternative to ChatGPT that runs on the desktop
Jan | Rethink the Computer. Jan turns your computer into an AI machine by running LLMs locally on your computer. It’s a privacy-focus, l...
jan.ai
#desktop#chatgpt
4 5652 4
New
Back to top

Sponsor Spotlight

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Frontend>Questions

Frontend Questions ❯

Latest on Devtalk

Devtalk ❯

We ❤️ helpful members!

We reward our most helpful members via our MOTM scheme - by giving away a whopping 25 books per year!

Member of the Month

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

EEF

Supporting innovation across the BEAM ecosystem.

coders51

We build reliable cloud platforms for business-critical systems.

Manning Publications

Develop your skills with books, videos, and courses.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Popular Portals

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

EEF

Supporting innovation across the BEAM ecosystem.

coders51

We build reliable cloud platforms for business-critical systems.

Manning Publications

Develop your skills with books, videos, and courses.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement See our Roadmap