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 1161 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 1161 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 1398 0
New
jss
Frontend>Questions

What does svelte offer that React or Vue doesn’t?
What does svelte offer that React or Vue doesn’t?
/react/svelte/vuejs
12 1387 3
New
jubocade
Frontend>Questions

Front end course for more advanced stuff?
What is the best course of front end (live webinars or recorded)? So I already have basic understanding of HTML CSS JS and React but I wa...
#css/react#course#frontend/html/js
7 1598 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...
#coder
5 890 1
New
david-j-m
Frontend>Questions

How to stop and restart #each loop
Hi I have a gallery site which displays paintings according to selected category (oils, water-color, etc.) “on:click” event. When this e...
/js
0 1032 2
New
harwind
Frontend>Questions

In javascript, how do you call a function?
First have a look at the code: function mainfunc(func, par3, par2){ window[func](par3, par2); } function calledfunc(par3, par2){ ...
/js
4 896 1
New
Fl4m3Ph03n1x
Frontend>Questions

Changing endpoint.ex to “use Desktop.Endpoint” breaks Desktop app
Background I have created a fresh Phoenix app using mix phx.new.web web_interface --no-dashboard --no-ecto --no-gettext --no-mailer insid...
/elixir/phoenix#desktop
2 855 1
New
pjamesrud
Frontend>Questions

Android app, using a loop value to set visibilty and add data to textview?
I am creating an app that allows user to enter values and depending on the value a number of textviews are changed programmatically from ...
#android/java
1 660 1
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 441 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
4 58 4
New

Other popular topics Top

Exadra37
Linux>Questions

AMD or Intel for Programming with Linux as the OS?
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
#desktop-computer
36 5740 10
New
PragmaticBookshelf
Game Dev>Learning Resources

Apple Game Frameworks and Technologies
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
pragprog.com
#pragprog#ios#game-dev#macos/swift#published-book#apple/book-apple-game-frameworks-and-technologies
30 6234 10
New
AstonJ
General Dev>Hardware

Custom keyboard keycaps
There’s a whole world of custom keycaps out there that I didn’t know existed! Check out all of our Keycaps threads here: https://forum....
#hardware/keyboards#keycaps#mechanical-keyboards
15 9736 19
New
Exadra37
Linux>Chat

RancherOS is in end of life
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
#linux#rancheros
10 5767 6
New
AstonJ
General Dev>Dev Chat

Languages Without Garbage Collection
Continuing the discussion from Thinking about learning Crystal, let’s discuss - I was wondering which languages don’t GC - maybe we can c...
#garbage-collection
21 5189 7
New
Margaret
General Dev>Sales

Get 50% off these PragProg books during our Think Again Sale
Think Again 50% Off Sale » The theme of this sale is new perspectives on familiar topics. Enter coupon code ThinkAgain2021 at checkout t...
#community#pragprog/elixir/book-a-common-sense-guide-to-data-structures-and-algorithms-second-edition/book-programming-machine-learning/book-the-ray-tracer-challenge/book-forge-your-future-with-open-source/book-software-design-x-rays#algorithms/book-testing-elixir#machine-learning#sale/book-concurrent-data-processing-in-elixir/book-intuitive-python
8 6210 2
New
PragmaticBookshelf
Backend>Learning Resources

Agile Web Development with Rails 7
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
pragprog.com
#pragprog#web-development/ruby/rails#published-book/book-agile-web-development-with-rails-7
32 5327 9
New
First poster: bot
General Dev>In The News

Zig now has built-in HTTP server and client in std
zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig. General-purpose programming language and toolchain for maintaini...
github.com
/zig#http
0 4388 0
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 4972 23
New
PragmaticBookshelf
Backend>Learning Resources

Engineering Elixir Applications
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
pragprog.com
#pragprog/elixir#published-book/book-engineering-elixir-applications
40 4988 21
New
Back to top

Sponsor Spotlight

EEF

Supporting innovation across the BEAM ecosystem.

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