Jump to content
Search Community

jackb87

Members

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by jackb87

    Best GSAP Plugin for Scroll Triggered Animations

    in GSAP

    Posted

    17 hours ago, PointC said:

    Hi @jackb87 :)

     

    ScrollMagic would be my personal recommendation. Depending on what you're doing, you may be able to forgo a 3rd party library. @OSUblake demonstrates a few possibilities in these threads.

     

    Hopefully that helps. Happy tweening.

    :)

     

    Thanks for that @PointC! I guess i'll stick with Scroll Magic. I'm not a very experienced with writing Javascript so I have to use plugins like this (for the time being).

     

    I saw @OSUblake mentioned in one of the posts you linked that they may be including a utility for scroll triggers in the future - which would be incredible (I'm guessing a large percentage of GSAP projects want animations to be triggered at a scroll point?). Looking forward to hopefully see that come to fruition!

     

    Cheers,
    Jack  

     

     

    • Like 2

    Reset animation when the animated element is scrolled out of the browser viewport

    in GSAP

    Posted

    On 11/04/2017 at 7:26 AM, OSUblake said:

    Haha! So true. I don't feel like learning a new API that I will probably never use, so I just come up with my own solutions. But I must say, it seems like we handle a lot of scroll magic questions, so maybe it's time for an official GSAP scrolling utility. That way we can offer better support for scrolling questions on this forum.

     

    This would be awesome! Please do. 

    • Like 1

    Best GSAP Plugin for Scroll Triggered Animations

    in GSAP

    Posted

    Hi, 

    I'm just curious as to what people's go-to approaches are for scroll triggered animations with GSAP these days. I played around with Scroll Magic years ago. Is that still the best tool? Particularly looking for something with good mobile performance. Are there any others that work well with GSAP?

     

    Thanks in advance, 
    Jack 

    How to hide elements so they aren't visible before animation is triggered

    in GSAP

    Posted

    Thanks again Diaco.AW! I'll give that a try. 

     

    Just another quick one regarding this animation i'm trying to get going. Here is a codepen to make things easier -

    See the Pen pJJNxm%C2%A0 by bilbs87 (@bilbs87) on CodePen

     

    You'll notice the second part of the animation I have the lines animating in. I'd like them to expand from the centre instead of from the left. Should I be using a different property than scale to achieve this? I tried playing around with transform origin but didn't have any luck. Thanks!

    How to hide elements so they aren't visible before animation is triggered

    in GSAP

    Posted

    Hi, 

    Just getting started and this is probably a very easy answer but I haven't been able to turn up anything so far. 

     

    I'm trying to create a very simple animation of a site's logo on page load like so:

     

    TweenMax.from(".logo-svg", 1, {y:-100, scale:0.85, opacity: 0, delay: 2});

     

    However, as the script is being loaded last at the bottom of the page, the logo is flashing up for a second before the animation is triggered. 

     

    I know I could stop this by setting the opacity of the logo to 0 in the css, then use TweenMax.to instead, but the .from method is much more intuitive to build the animation with (especially as I want to chain a few more animations on).

     

    Is there a simple solution to hide the element before the animation's triggered? I've tried playing round with immediateRender but it doesn't seem to have any effect. 

     

    Thanks in advance,
    Jack

     

    PS sorry for lack of code pen but I wasn't sure it'd be too useful given the query is more to do with the order of assets loading. 

×
×
  • Create New...