shaderpixel

You are right, my bad. I was overthinking it. Thank you so much for your help!

These are great examples! Are there any examples that make use of images instead of background images (that's my current use case, unfortunately)?

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!

Thank you so much for the quick response @ZachSaucier. ? I see now how the timeline child is in its own encapsulated yoyo repeat and there is a global repeat that handles the repeat delays. Thank you again.

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.

Alright I think I have my questions figured out. In your pen http://codepen.io/osublake/pen/0d4742d2200d028ed42297cb874af2b5, 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.

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.

Alright, I forked the support starter pen and this is what I ended up with this http://codepen.io/Shaderpixel/pen/WRjjrw?editors=1010 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.

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.

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; } }