SteveS

I am using the FLIP plugin to animate elements in a grid, but I want the animation to be scrubbed by a scrolltrigger. Unless I'm missing something, I don't see any documentation on doing such a thing, so any thoughts would be helpful.

Nevermind, I had confused a few options.

Having read some forum posts about the difficulties of animating flex properties, I still figured that the `gap` property would be tweenable given it is a numerical value, but I can't seem to. Is this a known gap in GSAPs abilities?

This is true. However, it allows me to create a hero animation which will automatically die if the page is scrolled past a certain point and simultaneously create a scrollTrigger controlled tween. The only part of this I don't like is that I have to use a gsap.set() instead of the tween automatically "completing". I suppose in this instance I'm using the timeline as a means of organizing my animations and not so much as a way to control the animations. I can see this might be an issue if I continue to scale the timeline. I might look at doing the same structure without a timeline for something a bit cleaner. Since I am using ThreeJS, there are no divs. I'm accessing 3D objects rendered to a 2D canvas. Technically I can do something similar and place the objects in a "group," but there are reasons I wouldn't want to do that. Even if I did, I'm not sure how well that addresses my core question, being what is the cleanest way to have hero elements animate in on load before being handed off to a scrollTrigger. In theory I could write a bunch of if conditions for each aspect of the animation to check the scroll position of the page, but that seems like a significant amount of work and performance cost for the given task. I found that using an onLeave callback to create the scrolltrigger, kill the current tween, and set the position of the element gives me the results I'm looking for, but feels hacked together. I would have preferred using self.complete() to make sure my element was in the correct position instead of gsap.set(), but I found that .complete() doesn't instantly go to the tween end state, and instead animates through the entire tween very quickly.

I think I figured out a solution, though it isn't perfect. waveAnim.from(this.wave.position, { x: -30, scrollTrigger: { trigger: "#section-27-12", start: "center 80%", end: "center 40%", markers: true, onLeave: (self) => { gsap.set(this.wave.position, { x: 0 }) waveAnim.to(this.wave.position, { x: 11, scrollTrigger: { trigger: "#section-27-12", start: "bottom 92%", end: "bottom 55%", scrub: 1 } }); self.kill() } }, ease:'power4.inOut', duration: 4 }) Here I am using a scrolltrigger to detect whether I am at the top of the page and if I am past the scrolltrigger it immediately kills the tween. Then using an onLeave callback I setup the scroll responsive animation. Some questions I have remaining: - Are there any considerations about this method I might not be aware of? - In the onLeave, the first thing I have to do is manually use gsap.set() or else the second scrolltrigger tween uses the x: -30 from the first scrollTrigger. Is it possible to get it so that it uses the initial position of the element, in this case x: 0?

Yes, as in the user scrolls halfway down the page and then reloads the page. Or even if the user scrolls immediately on load it will mess things up. I don't want to force users to the top of the screen, but rather I'd prefer a better way of controlling the animations. Surely there is some sort of best practice for handing off elements from a static tween to a scrolltrigger on page load? To some degree I can force it by checking where on the page the user is at load, but that feels a bit hacky to me.

Hi, my problem is as follows: I am building a site using GSAP to animate elements in ThreeJS. ThreeJS renders 3d models in browser to a <canvas> element which is fixed to the viewport and placed behind DOM content. When the page loads, I have it set for an element to tween from offscreen to a resting position on screen, then when I scroll, it will tween off the other side of the screen using a scrolltrigger with scrub enabled. Initially, I was making a tween that fired when the page loaded, and then in the onComplete callback I was creating the scrolltrigger tween. The issue is that if I load halfway down the page, the first tween still fires and brings the element into the background. gsap.from(this.wave.position, { x: -20, ease:'power4.inOut', duration: 4, onComplete: () => { gsap.to(this.wave.position, { x: 11, y: "+= 1", scrollTrigger: { trigger: "#section-27-12", start: "bottom 92%", end: "bottom 55%", scrub: 1 } }) } }) I guess the question I have is as follows: If I want to have elements which tween into a hero section on load, but then are controlled by a scrollTrigger, how do I handle loading the page lower than said scrolltrigger?