Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by shaderpixel

  1. I am trying to create a simple parallax slide using scrollTrigger. I am wondering if there is a simple way to pull in the scrub value from the markup using data attributes e.g. data-speed="0.15" instead of hardcoding it. As I believe, GSAP internally uses document.querySelectorAll so how can I get different data-speed to apply to the scrub property?

    Also is scrub the value to use if I want to control the parallax speed? If not, what should I use instead?

    Below is my current setup:

          let tl = gsap.timeline({
            scrollTrigger: {
              trigger: '.gs-parallax-item',
              scrub: 0.25,
              start: 'top bottom',
              end: '80% top',

    Thanks for the assist!

  2. Hi there. 

    I have spent a few hours trying to figure out the best way to add a delay between yoyo iterations using GSAP3 but I still couldn't figure it out. I have tried repeatDelay but that is not what I want. I have also tried keyframes property but I am not sure if I am doing it right. Can someone show me the ropes? It will be much appreciated. Thank you.

    See the Pen rNxdqre by Shaderpixel (@Shaderpixel) on CodePen

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

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

  5. 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', {
                if (scrollAppearLocation > targetObjectOffsetTop) {
                } else {