CodePen - GSAP - Getting Started

[enkicoma 1 Likes (Newbie)]

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

[elegantseagulls 1,409 Likes (Superhero)]

es imports won't work in codepen the way you have it setup, and you don't have the gsap cdn linked to your codepen.

Here's how: Click the gear icon by your JS tab, and add the gsap cdn there in the pen settings (easiest way is to search for it).

[elegantseagulls 1,409 Likes (Superhero)]

Also, @enkicoma, we are happy to help debug via codesandbox too, especially for things like React/Vue. 

 

The reason we prefer CodePen is the the simplest/clearest for quick troubleshooting/iterating.

[Ali Manuel 75 Likes (Contributor)]

As @elegantseagulls says, remove this line

 import * as gsap from "https://cdn.skypack.dev/gsap@3.6.1";

 

[enkicoma 1 Likes (Newbie)]

@Ali Manuel thx, that was automatically being put by codepen when in `Add Packages` I said `gsap`, for some reasons even css is not working with html.. quite weird is this codepen

[enkicoma 1 Likes (Newbie)]

ok, so code pen doesn't like the `<div className="right-col">` thing it has to be just `<div class="right-col">` without `Name`

[elegantseagulls 1,409 Likes (Superhero)]

Just now, enkicoma said:

ok, so code pen doesn't like the `<div className="right-col">` thing it has to be just `<div class="right-col">` without `Name`

className isn't valid HTML, It's specific to React.

[enkicoma 1 Likes (Newbie)]

@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 

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

[Ali Manuel 75 Likes (Contributor)]

@enkicoma Well , maybe this can be your solution 

See the Pen qBryZEb?editors=1010 by itsalimanuel (@itsalimanuel) on CodePen

[enkicoma 1 Likes (Newbie)]

@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?

[elegantseagulls 1,409 Likes (Superhero)]

You might consider wrapping your three ribbons in a seperate div and snap to that instead of each of those.

[enkicoma 1 Likes (Newbie)]

@elegantseagulls thx for the idea, I tried to put those 3 things under `main-col` but very weird `snap` is doing. Like something is broke...

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

[Cassie 5,122 Likes (Superhero)]

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
 

[enkicoma 1 Likes (Newbie)]

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