Jump to content
Search Community

CodePen - GSAP - Getting Started

enkicoma test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi guys,

I see that on this forum CodePen is heavily used, I prefer: https://codesandbox.io/ but I decided to try codepen. I tried to put a working example from my localhost to codepen but I got some issues with GSAP dependencies . I tried to use the CDNs from this example: 

See the Pen yLegBwO by GreenSock (@GreenSock) on CodePen

 

Uncaught TypeError: gsap.registerPlugin is not a function

See the Pen MWpXqVz by enkicoma (@enkicoma) on CodePen

Link to comment
Share on other sites

@elegantseagulls & @Ali Manuel Since you supported me here to get my codepen example working, instead of creating new post I will ask here my second GSAP struggle:

I have a scrolling page: 300vh = 3 pages. Mid page has 3 divs with 33.33vh and when trying to use GSAP ScrollTrigger `snap` effect.. is always confused and plays back and forth.

Is there a way to tell `snap` to snap in the middle of the page always. I don't want to snap it to the nearest section because it strugles to understand which div to put as a priority. Tried, `section`, `header`, `footer`, left-middle-right-col... Doesn't work 

Link to comment
Share on other sites

@Ali Manuel thank you for your help, indeed you example looks very clean and simplified (I like it) but still this will restrict me to use `snap`. I tried to play with your example and snap and still won't perform well. 

I am trying to snap per page - to help the user, create a better experience (in case they stopped scrolling 80px or) the snap always will help to put `section` under a full viewport/page and see all 3 buying products. 

I see you are quite experienced, do you know any alternatives?

Link to comment
Share on other sites

  • Solution

I think you're looking for CSS scroll snapping rather than scrollTrigger snapping?

ScrollTrigger's snapping is set up to snap to certain progress values in a timeline - think of it as snapping to certain points in an animation rather than points in a page.

Here's a good example - The horizontal 'scrolling' is actually a tween on the x axis and the snaps are set to certain points along that animation, those points correspond to the times that the sections are in full view - so it looks like it's snapping to the sections.

See the Pen cab879e04d29d1e8ff3014ff2703cb74 by GreenSock (@GreenSock) on CodePen



In your demo you're not animating the y value, you're just using the normal native scroll. So you can't 'snap' to a certain point in the page. 

What you can do is pair scrollTrigger with CSS Scroll snapping - like this

See the Pen 8df87df20719bf7f9d24b9f2cf688511 by cassie-codes (@cassie-codes) on CodePen



I've also changed the values you're animating to xPercent rather than left and right. It's always best to animate transforms where possible. Animating layout properties is pretty rough on performance
 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@Cassie Thank you for such a detailed response. Indeed is something I want, I thought that GSAP will replace CSS because it's made for this(to simplify things), that's why I tried `snap` thing. Your example doesn't scroll till `footer` end but should be something easy to fix: (put footer under </section>)

See the Pen 8df87df20719bf7f9d24b9f2cf688511 by cassie-codes (@cassie-codes) on CodePen


Once again, thank you for your support!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...