OSUblake

@GreenSock Can you explain the rules of when gsap animates an element's property? I remember you going over this in the old gsap 3 forum, but those posts are gone, and I totally forgot.

A simpler way to do this. const wrap = gsap.utils.wrap([54,48,46,38,31,30,17]); gsap.to('.graphics-chart-total', { textContent: wrap, snap: { textContent: 1 }, stagger: 0.2 }); https://codepen.io/osublake/pen/c17e292cbd7a3f3037b6bd4f80d24315

No that's not possible. Do the animations inside your panel use ScrollTrigger? If so, it would probably be better to let the parent handle them. And you don't need to put the timeline on the data object. That's for reactive properties. mounted() { this.panelTimeline = gsap.timeline() }

You remove it. https://greensock.com/docs/v3/GSAP/gsap.ticker

Hard to say what your issue is without seeing a demo, but you should not be using selectors. Use refs as they are local to the instance. Using a selector searches the entire DOM. <ul> <li ref="post" v-for="post in posts" :class="box" :key="post._id">{{ post.title }}</li> </ul> mounted() { this.startAnimation(); }, methods: { startAnimation() { ScrollTrigger.defaults({ toggleActions: "restart pause resume none", markers: true }); this.$refs.post.forEach((el, i) => { gsap.to(el, { scrollTrigger: { trigger: el, scrub: i * 0.2 }, x: "400px" }); console.log(i, "hello there"); }); } }

You can't import like that in codepen. It has to be a valid url. https://codepen.io/osublake/pen/970c05a3054c7331a71983c2fd9fb45a

I meant show us what you tried in a demo.

What did you try

You're also not setting the pRef in your render function. And why are setting your refs to an array? ?‍♂️ const purpleRef = useRef([]); const pRef = useRef([]);

I think that demo is rather confusing, and the helper function has issues. It doesn't work with a single element, and it doesn't handle interruptions correctly. getBoundingClientRect throws it off mid animation. Click repeatedly to see the issue. https://codepen.io/osublake/pen/9d0a2b57a1e70f57f752969f588216c5 Handling size changes would be even better, although scaling requires a little bit of work to counter scale. The less performant way would be to animate width and height.

Ah, ok. Still pretty interesting.

Animate to an opacity of 0, not from.

I do that technique all the time ? What's your video code look like?

What is dragMode? Never seen that before.

That won't happen if you do a FLIP animation.

It's animating transforms. If an element doesn't have transforms applied, it's sitting at 0,0. But you only have to provide the starting values if you're using type: "bezier".

You don't have to calculate it. You can certainly approximate it. Depends on how you want it to look. I don't know if that will create a perfect arc. When you pass in points like to the motion path plugin, it goes through every point, which is unlike a typical bezier. And it also has a curviness setting. That's part of the problem. I tried doing some stuff to center everything, but you have some wonky stuff going on, like setting the positioning to fixed and clearing out styles. If you want to clear a particular style, you can use clearProps: "position" https://codepen.io/osublake/pen/c788c2df441f452f9c4fb16dbf952f9a But I would do this with a FLIP animation. I don't do an arc here. Just showing the technique. https://codepen.io/osublake/pen/zMqevJ From this thread.

I didn't dig into your code, but here's how I do arcs. https://codepen.io/osublake/pen/fe6af24fc80f10117b7a07deb594b3de You can also create an arc motion by animating x and y with different eases. cc @Carl

Are you sure the file is being committed to your repo? A lot of .gitignore files block .tgz files. # Output of 'npm pack' *.tgz If you have that rule, you need to make sure to allow the file. !gsap-bonus.tgz

One of the arguments for hooks is that you don't have to use this. So instead of using this.someValue, you now have to use someValue.current. I don't see how that is an improvement. ?‍♂️ So simple. <template> <button @click="inc">{{ count }}</button> </template> <script setup> import { ref } from 'vue' export const count = ref(0) export const inc = () => count.value++ </script>

That's hooks! It calls the same function on every render/update, so values won't persist. Only the initial ones. That's another reason why I don't recommend creating animations inside a useRef call. It will create a new animation and then throw it away on every update. export default function App() { // creates a new timeline on every update // keeps the original, and throws away the new one const tl = useRef(gsap.timeline({ paused: true, repeat: -1 })); useEffect(() => { tl.current .to(testEl.current, { duration: 1, opacity: 0, onComplete: update }) .play(); }, []); } Better approach. export default function App() { const tl = useRef(); useEffect(() => { tl.current = gsap.timeline({ repeat: -1 }) .to(testEl.current, { duration: 1, opacity: 0, onComplete: update }); return () => tl.current.kill(); // return function to kill on unmount }, []); }

Don't use new. TweenLite, TweenMax, TimelineLite, and TimelineMax are deprecated. I think you have some logic problems, but if you know all the animation values, then just loop through and create everything up front. var animationData1 = [ { x: -100 }, { x: 100 }, { x: -100 }, { x: 15 }, ]; var animationData2 = [ { x: -15 }, { x: 10 }, { x: -10 }, { x: 15 }, ]; this.tweening = gsap.timeline({ onUpdate: showProgress.bind(this), defaults: { duration: 5, ease: "none" } }); this.tweenArr.forEach((node, i) => { var settings1 = Object.assign({}, animationData1[i]); var settings2 = Object.assign({}, animationData2[i]); this.tweening .to(node, settings1, 0) .to(node, settings2, ">"); });

Are you trying to do random animations? Create a function where you pass in a target and have it create an animation, in the onComplete, have it call a function to do another random animation. Rinse and repeat.

You need to step through it frame by frame. Look at my processImage function in app.js. http://plnkr.co/edit/oZjPbgo9hvqwUYEV7RLi?p=preview&preview

You don't need to @ people. You shouldn't use new for timelines. It's not a constructor. // BAD var tween1 = new gsap.timeline(); // GOOD var tween1 = gsap.timeline(); You also don't need timelines for a single animation. Why don't you just create a list of the properties to animate? var animationData = [ { x: 10 }, { x: -10 }, { x: 20 }, { z: 15 }, { x: 15 } ]; tweenArr.forEach((node, i) => { var settings = Object.assign({ duration: 10, ease: "none" }, animationData[i]); gsap.to(node.position, settings); });