CodePen - GSAP - Getting Started

[enkicoma]

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]

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]

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.

[Али К]

As @elegantseagulls says, remove this line

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

 

[enkicoma]

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

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]

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]

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

[Али К]

@enkicoma Well , maybe this can be your solution 

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

[enkicoma]

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

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

[enkicoma]

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

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]

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