Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by enkicoma

  1. Hi 

    I found this website on GSAP: Showcase page.

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


    See the Pen by (@) on CodePen

  2. 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 ^_^

    Screenshot 2021-06-10 at 13.18.19.jpg

    Screenshot 2021-06-10 at 13.18.35.jpg

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

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

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

  6. 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". 

    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