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

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 1845 1
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
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 1198 2
New
palak231
Frontend>Questions

Is JavaScript IDE really helpful for Web Design
Hi this is Palak Sharma I am new here and I found this community while researching about JavaScript over the internet. Well I have comp...
/js
4 1270 2
New
sona11
Frontend>Questions

What are TRC and DRC in relation to DBMS?
What is the difference between tuple relational calculus (TRC) and domain relational calculus (DRC)? What distinguishes them from relatio...
#database
0 1010 0
New
WiseDan
Frontend>Questions

Gsap.js - how to load content in my home page when user scrolling?
hi everybody , am new in gsap.js so i wanted load content in my home page when user scrolling , but since am reading the documentation ...
#gsapjs
2 1162 1
New
Fl4m3Ph03n1x
Frontend>Questions

How to get app.html.heex to use assigns properly with LiveView
Background I have a Phoenix application, where all pages (expect the login page) have a menu at the top. This menu will therefore only a...
/elixir/phoenix#liveview
2 1128 1
New
harwind
Frontend>Questions

CSS Flexbox Alignment Issue: Items Not Centering Horizontally
I’m currently working on a front-end development project and I’m facing an issue with aligning items using CSS Flexbox. I want to horizon...
#question
1 715 0
New
Fl4m3Ph03n1x
Frontend>Questions

Assigns is not assigning attribute in custom core component
Background I have a custom component in my LiveView, which is basically a group of checkboxes. I want to add a new attribute to my custo...
/elixir#liveview
1 778 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 863 1
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
DevotionGeo
Backend>Questions

Can someone explain the -t option/flag in docker run command?
I know that -t flag is used along with -i flag for getting an interactive shell. But I cannot digest what the man page for docker run com...
#docker
7 10261 2
New
AstonJ
General Dev>Dev Chat

Which language or framework do you want to learn next?
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
#community#learning
243 6639 97
New
Rainer
Community>Journals

Programming Erlang Book Club
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
/erlang/book-programming-erlang-2nd-edition#book-club
195 6815 95
New
AstonJ
General Dev>Hardware

Keyboard thock (sound)
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
/keyboards#mechanical-keyboards
14 11197 8
New
Margaret
General Dev>Dev Chat

PragProg’s Medium Posts
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
#pragprog#blog-post
1147 29994 760
New
AstonJ
Data Science

Can AI/ML predict a lottery win?
Biggest jackpot ever apparently! :upside_down_face: I don’t (usually) gamble/play the lottery, but working on a program to predict the...
#ai#machine-learning
19 3939 10
New
Help
Game Dev>Questions

Can I use Java to program a game for Nintendo switch?
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
/java#nintendo
8 4771 3
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Rebecca Skinner (Author) Interview and AMA!
Author Spotlight Rebecca Skinner @RebeccaSkinner Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
#author-spotlight/haskell/book-effective-haskell
106 11719 28
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 7136 21
New
Back to top

Sponsor Spotlight

AppSignal

Catch errors, track performance, monitor hosts and more.

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