callmegoon

Totally - appreciate it!

I haven't figured out a good way to create a minimal demo because my issue involves content that is loaded via ajax using the Wordpress plugin Ajax Load More. That said, I thought I'd try to explain the issue in words. If it makes no sense - ignore me! Problem: Parallax effect (data-scroll="0.9" for example) does not seem to work on content loaded via ajax. Here is a page, for example (the images, which are actually little video thumbs) should have a parallax effect on them (like they do on the home page here.) Attempted Solve(s): First, I'm initiating the ScrollSmoother (so that it works and fires sitewide). Next, I'm using a callback provided by Ajax Load More (almComplete) to fire a "ScrollTrigger.refresh();" once the ajax content has completely loaded. However, it is not initiating the parallax effect on the image/video thumbs that were added via ajax. I've also put it inside a setTimeout of multiple seconds, and it doesn't seem to fire. What does work: What's interesting is that if instead of firing ScrollTrigger.refresh() in my ajax callback function, I reinitiate ScrollSmoother with... let smoother = ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1, normalizeScroll: true }); ...then the parallax effects work! In all my reading, it seems that ScrollTrigger.refresh() should refire everything related to ScrollSmoother, but it doesn't seem to be working in this instance. Is there a different/better approach? Or, any thoughts as to why that order of events wouldn't refresh/fire my parallax elements? As noted, I can get it working by using the method above of creating a smoother within my callback, but that feels wrong, so hoping to figure out what I'm doing wrong. Thanks!

Yes, nailed it - thanks! I can mess with the details, but understanding now the actual issue is super helpful. Thank you again!

I'm working on a loading animation that will transition into a page scroll scrub using ScrollTrigger, but I can't get the two pieces to mesh properly. Here's what we want: the sprinkles start off screen and fly up from the bottom (this is working) they fly up to a somewhat random y translation and random rotation (this is working) then, on scroll, I'd like them to scrub to their desired y translation (0) and rotation (defined in CSS) — this part is not working As you can see in the codepen, once you start scrolling, it seems like the translateY jumps back to 100vh and then scrubs to 0. It's not keeping the new translateY value that it's animating to on the initial load. I assume there is a way to reassign or save that y value to use in subsequent animations, but I can't figure out how. Hopefully that all makes sense—let me know if anything is unclear.

Thanks @mikel - that was actually the next thing on my list to try. Thanks for the headstart!

@akapowl That did the trick for me - thanks! --- @ZachSaucier I wanted to use the onComplete method as well, but it doesn't seem to be firing for me when I use batch. Perhaps I'm not implementing correctly... https://codepen.io/callmegoon/pen/qBNNOdy

I'm trying to figure out how to target the element within a batch process on scrollTrigger. In my simple example, I have a script that is using scrollTrigger to look for all elements with a particular class. When it comes into view, I'm toggling a class to change the color. I want to be able to possibly run other functions on that element as well. For example, I may want to add another class to it. Or, I may want to delay it based on a data attribute. But, I can't seem to figure out how to get each target element. I tried "this", I tried "this.target". I tried $(this). For the sake of this question, let's just say I want to add another class to each element after it comes into view. I would have thought something like this would work, but I must be doing something wrong. ScrollTrigger.batch(".animateOnLoad", { toggleClass: "inView", onEnter: function() { var element = this.target; setTimeout(function () { element.addClass('animationComplete'); }, 2000); }, once: true }); Any tips here would be much appreciated!

@GreenSock Yesssss, this is just what i'm going for! Buttery smooth - I love it.

Loving it @GreenSock ! This solution seems to solve my Safari - much appreciated ?

Thanks @PointC - buttery smooth ?! I'm still seeing some weird Safari issues when the line reverses, but this is a great starting point for me!

I’m trying to create a similar animation that you can see here (http://springsummer.dk/) when you hover over some of their work (maybe halfway down the page) — a line comes in and up and then kind of squishes to the right height. I recreated this effect in a simple code pen that can be seen below using just css animations. However, in my testing, I came to learn that Safari does not support the negative stroke-dashoffset that I’m using in the animation. Soooo, I’m thinking a gsap/js solution may be my savior, but I'm struggling to find a solution. Where I'm struggling most is the part at the end where the bottom/back of the line comes up a bit - it's as if the line the line was pulled/stretched, then snaps back into place from the back. I haven't found anything that let's me control the back of the line in that way. I can mess around with a solution if anyone can point me in the right direction — I'll owe you a ? Thanks!