Jump to content
GreenSock

shaderpixel

Using TweenMax with RAF

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

 

I am a beginner to using GSAP and I am at a lost at trying to implement GSAP in a requestAnimationFrame loop. When the rAF runs, it will call the function below. What I am trying to achieve, if possible, is to have a tween run when window.scrollY is past a certain number (which is the element.offsetTop), and reverse it when the window.scrollY is less than a certain number. The tween should start from opacity:0 to opacity: 1. I am not even sure if I am doing this correctly. I can accomplish the similar effect using add/remove class but I feel like giving Tween a try. Please advise. Thanks!

function addAnimationClass(targetName) {
            var targetObject = document.getElementsByClassName(targetName)[0];
            var targetObjectOffsetTop = targetObject.offsetTop;

            var tween = new TweenMax('.'+targetName,'3', {
                opacity:1,
            });
            tween.reverse()
            tween.pause();

            if (scrollAppearLocation > targetObjectOffsetTop) {
                tween.resume();
            } else {
                tween.restart();
                tween.reverse();
                tween.pause;
            }
        }
Link to comment
Share on other sites

Hi shaderpixel :)

 

Welcome to the GreenSock forum.

 

Sounds like you're trying to create ScrollMagic functionality without using ScrollMagic.

 

I think this thread could be quite helpful for you.

 

https://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/ 

 

Hopefully that helps.

 

Happy tweening and welcome aboard.

:)

  • Like 1
Link to comment
Share on other sites

Thanks @PointC for the warm welcome. 

 

I scanned the post you sent. Seems like I might have to consider Skroll Magic.

 

Edit: I see a code snippet by Shaun towards the end, but his seems like a simplified one time animation.

 

But what I hope to understand is why is my tween.resume() not triggering..any ideas? At this point, the element is not visible and at a pause stage, and when I scroll past the trigger location, nothing happens. I tried to include a comment block along with the tween.resume() and the comment shows multiple times every time scroll is triggered. I wonder if tween.resume() is actually being called multiple times. Is there a way to check if its been called at all? ..Thanks again.

Link to comment
Share on other sites

Alright, I forked the support starter pen and this is what I ended up with this 

 

See the Pen WRjjrw?editors=1010 by Shaderpixel (@Shaderpixel) on CodePen

 

So now the targeted section has zero opacity and will not reappear...

 

It seems like all the code in the function is fired on scroll, do you think that could mess with things?

 

Thanks again.

Link to comment
Share on other sites

It's usually a good idea to go all the way through a thread, as there might more additional demos or information.

https://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860

 

This thread also has some scrolling animations. 

https://greensock.com/forums/topic/14912-parallax-scrolling-sections/?p=64129

 

Right now you're trying to create a tween on every scroll. That's probably not good for performance if you have a bunch of animations. Create your animations before hand, and just reuse them. 

 

See if you can make sense of the stuff I just linked to, and I can advise from there.

 

 

 

 

 

 

 

.

  • Like 1
Link to comment
Share on other sites

Wonderful resources. Thanks Blake, I will spend the day going through them and come back with questions..which I am sure I will have lol. 

Link to comment
Share on other sites

Alright I think I have my questions figured out.

  • In your pen 

    See the Pen 0d4742d2200d028ed42297cb874af2b5 by osublake (@osublake) on CodePen

    , I am trying to make sense of the following
      TweenLite.set(item, {
        backgroundColor: color,
        rotation: 180 * sign,
        xPercent: 100 * sign,
        yPercent: 100,
        autoAlpha: 0,
        scale: 0
      });
      
      var tween = TweenLite.to(item, 0.45, {
        autoAlpha: 1,
        scale: 1,
        rotation: 0,
        xPercent: 0,
        yPercent: 0,
        paused: true,
        force3D: true
      }).progress(1);
    
    So .item has properties set using .set(), and has a tween via var tween. What is the purpose of .progress(1)? Does that mean that the tween properties has already taken place and the item is now visible because the virtual playhead is now at the end of the animation?
  • What is the difference between using requestAnimationFrame VS. TweenLite.ticker.addEventListener("tick", update); Which method is more standard and produces better performance, in my current situation would you recommend using ticker vs rAF? 
  • In the normalize examples, I understand the min, max, and value parameters but how can I get better at coming up with those figures? Is there like a cheat sheet or those are pretty much what I will use 90% of the time?

 

The normalize and clamp functions are really helpful. I hope I am not being a pain by asking the above questions, my JS is only average and I am trying to get better at it. You guys have been amazing at responding and I want to sincerely say this is the friendliest forum that I have joined. 

Link to comment
Share on other sites

I don't mind, but it sounds like you got most of it.

  1. I set the progress to 1 to advance the tween to it's end state so that the boxes at the top are visible. Otherwise, the screen would be empty until you started to scroll. Alternatively, I could have skipped setting the progress and just called the update function, but then all the visible boxes would start out animating, and I wanted them to be their end state.
  2. GSAP's ticker uses requestAnimationFrame, so there's not a lot of difference. I usually use the ticker because it gets called when GSAP's engine updates, keeping the updates in sync your tweens. You can also remove the listener when you don't need it if you're worried about power consumption on mobile.
  3. Normalize is generic utility function that converts a number within a set range to a percent/ratio. Its parameters should be more like this, currentValue, startValue, endValue as the start value could be larger than the end value. The values to use are going to depend on what your doing, but for scrolling they should be just like I did. For other uses, I look at it like a box or a graph, and use the left/right or top/bottom values.

Also note that in those 2 parallax demos, I was running all the code in the update function on every tick, but that was for brevity. Using some sort of dirty check like I did in my first example would be better.

 

And using getBoundingClientRect, while the most accurate way to determine where something is, can be slow. It works well for element visibility, but for scrolling, using the scroll position and offsetTop might be more efficient. I think most scrolling libraries use a hidden div as the element to test against as they won't be affected by a transform.

 

Look at this demo to see how coordinates might be wrong using offsetTop on a transformed element.

See the Pen 85e021b3614193158e4efad0c082443a?editors=0011 by osublake (@osublake) on CodePen

 

 

.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×