enkicoma
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by enkicoma
-
-
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!-
1
-
-
@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...
-
@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
-
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
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!See the Pen index.js:138-200 by s (@s) on CodePen
Club Plugins vs GSAP's core vs Extra Eases
in GSAP
Posted
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