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

dyowee
Frontend>Questions

Why or when should one choose Tailwind over Bootstrap?
Why or when should one choose Tailwind over Bootstrap? :slight_smile:
#bootstrap/tailwind
2 1527 0
New
The_Exile
Frontend>Questions

Need A Lot of Assistance From An Actual js Dev
I am new to programming. I started reading Eloquent Javascript 3rd Edition, as the book comes highly recommended as a good place for beg...
/js
53 2673 18
New
axelson
Frontend>Questions

Is there a library/automated approach to enforce the directions of imports/exports?
In Elixir I love to use the library GitHub - sasa1977/boundary: Manage and restrain cross-module dependencies in Elixir projects to enfor...
/elixir/typescript
6 1248 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
tomcatttttt
Frontend>Questions

Trying to get a seamless online game through the HTML5 API - it works in all browsers except Google Chrome.
I’m trying to take the API from the site to get a seamless online game through the HTML5 API. It works in all browsers except Google Chro...
#gaming#html5
1 1067 0
New
prego4444
Frontend>Questions

How to make a border that is in the middle?
how can i make a border like this to be exactly on the midle of the edge? i could only found border in inside and outside but nothing on ...
#css#frontend
1 934 1
New
JessicaW33
Frontend>Questions

What are some techniques for optimizing performance in React Native applications?
Hello everyone, I’m working on optimizing the performance of React Native applications and would like to gather insights and suggestions...
/react/react-native
2 758 1
New
hosseinkhosromanesh
Frontend>Questions

how coding a cluster in html css js
hello , i should code a cluster like image bellow we have no challenge in coding backend but in front need some clue to do this its a dy...
/js
0 581 0
New
ounce591
Frontend>Questions

Which FontAwesome5 icons would you use here?
I am currently designing the navbar of a workout tracking app written using React Native. The navbar has three buttons: Splits/Plans ...
/react/react-native
8 297 4
New
selamibaba
Frontend>Questions

How would you model a fixed 78-item content domain without duplicating data?
I maintain a content website built around a fixed domain of 78 unique items. This is the current overview page showing the complete data...
/typescript
0 0 0
New

Other popular topics Top

PragmaticBookshelf
Backend>Learning Resources

Programming Machine Learning
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
pragprog.com
#pragprog#ai/python#published-book/book-programming-machine-learning#math#algorithms
6 5350 3
New
PragmaticBookshelf
Game Dev>Learning Resources

The Ray Tracer Challenge
Brace yourself for a fun challenge: build a photorealistic 3D renderer from scratch! In just a couple of weeks, build a ray tracer that r...
pragprog.com
#pragprog#published-book/book-the-ray-tracer-challenge#algorithms
3 14528 0
New
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
DevotionGeo
General Dev>Code Editors

Dendron: a personal knowledge management tool on top of VSCode
/vscode#visual-studio-code
30 8077 9
New
PragmaticBookshelf
Frontend>Learning Resources

Modern CSS with Tailwind
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
pragprog.com
#pragprog/tailwind#published-book/book-modern-css-with-tailwind
12 5813 4
New
AstonJ
Backend>Chat

How to install Ruby 3 with ASDF
In case anyone else is wondering why Ruby 3 doesn’t show when you do asdf list-all ruby :man_facepalming: do this first: asdf plugin-upd...
/ruby#asdf
11 5961 4
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Mike Riley (Author) Interview and AMA!
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
#author-spotlight/python#iot/book-portable-python-projects#internet-of-things
62 7035 19
New
PragmaticBookshelf
Backend>Learning Resources

Programming Ruby 3.2 (5th Edition)
Programming Ruby is the most complete book on Ruby, covering both the language itself and the standard library as well as commonly used t...
twitter.com
#pragprog/ruby/rails#published-book/book-programming-ruby-3-2-5th-edition
28 8550 13
New
PragmaticBookshelf
Backend>Learning Resources

Machine Learning in Elixir
Leverage Elixir and the Nx ecosystem to build intelligent applications that solve real-world problems in computer vision, natural languag...
pragprog.com
#pragprog/elixir#published-book#machine-learning#nx/book-machine-learning-in-elixir
18 4615 7
New
PragmaticBookshelf
Backend>Learning Resources

Agile Web Development with Rails 8
Get the comprehensive, insider information you need for Rails 8 with the new edition of this award-winning classic. Sam Ruby @rubys ...
pragprog.com
#pragprog#web-development/ruby/rails#published-book/book-agile-web-development-with-rails-8
12 7404 7
New
Back to top

Sponsor Spotlight

Pragmatic Studio

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

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!"

Linux New Media

Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.

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!"

Linux New Media

Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.

View all our sponsors ❯

We're in Beta

About us Mission Statement See our Roadmap