enkicoma

Hi 

I found this website on GSAP: Showcase page.
https://leonard.agency/en/

I like the animation which happens within 3-5 second accessing the web. I want to create the same thing but quite confused where to focus.

I don't know which GSAP plugins they used but to me looks like: FLIP and MorphSVGPlugin or...

I have a couple of questions:

1. Can it be achieved only with GSAP core ? (because in the forum I saw a couple of discussions) - 

See the Pen EqmxZV by PointC (@PointC) on CodePen

2. If I need some GSAP plugins - which they are? (need to understand which club subscription to buy)
3. what will happen when the subscription will end after a year or so? Could my prod app be affected? (mean I won't be able to build my app with all the npm club gsap plugins/dependencies ?)

cheers

See the Pen by (@) on CodePen

Hi guys,

I am interested to do a button/slider timing animation and I like the one from the https://greensock.com/ main page.

I am new to GSAP and I saw that tweenmax got deprecated and in general GSAP has a lot of plugins, features, etc. A bit lost...
I don't know on which plugin to focus, or is only gsap3 core?

Any examples, guidance will be much appreciated
 

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

@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

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

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

@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

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

 

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

Hi @Ali Manuel 

thank you for the example it helps a bit, that's quite a complex/complicated example O_O

Hi guys,

my first post here ^_^, 

I tried to animate on `x` axes and it works ok but I want to make this animation better. I am quite lost because to achieve such thing I need many marker "start&end". 
https://codesandbox.io/s/nextjs-global-css-migration-forked-6psms?file=/pages/index.js:138-200

I know that my markers are messed up but I want to achieve 2 things:
1. At the moment my animation works only 1 way "when scrolling from top to bottom" - I want the animation to happen in both ways... 
how is possible to tell "end" to become "start"?
2. `left-col`, `middle-col`, `right-col` are under 1 `section` and when the animation `start` hits the `section` the third/last `right-col` could finish till it gets there. - I would prefer the animation to `start` when the view port hits `right-col` not `section`
(`snap: 1 / 2,`) works but sometime is quite slow and animation and `snap` is not in sync.  looks like something is missing.

I don't think my GSAP code is clean, feel free to delete/simplify things if required

Any guidance/support will be much appreciated!

See the Pen index.js:138-200 by s (@s) on CodePen