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) - https://codepen.io/PointC/pen/EqmxZV 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

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>) https://codepen.io/cassie-codes/pen/8df87df20719bf7f9d24b9f2cf688511 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... https://codepen.io/enkicoma/pen/PopBNQa

@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 https://codepen.io/enkicoma/pen/MWpXqVz

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: https://codepen.io/GreenSock/pen/yLegBwO Uncaught TypeError: gsap.registerPlugin is not a function

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!