violet

Thank you Zach, very helpful! Animation is cool but I think it could be cooler with scrollTo. I updated the codepen. Here the srollTo is triggered when user scrolls on "start". But how can I do the opposite? For example, I would like that when user is scroll up from "end", the scrollTo goes to .big element. How can I do that? Is there a callback on end marker? Another question: do I need timeline in this simple example?

I'm trying to do a simple animation of a div that "became" another div. Basically I have a first div (big) and a second div (small). What I would like to do is simply animate the first div changing its translateY and it scaleY. Individually the transformations work, but together not. Can someone please help me?

Thank you OSUblake, very helpful. So the coordinates x1="0" y1="0" x2="0" y2="0" are where the first animation (at page refresh) starts? Right? Sorry, I'm a beginner..

Thank you Zach! I probably found the link to the old doc from an article and didn't notice I was reading the old version API. I'll be more careful next time

Hello everyone, this is my first post so sorry if I'm wrong in something. I'm unable to create a Codepen but I've created a Codesandbox, I hope it's good anyway. What I want to do is very easy: animate an svg line tag. So I created a tweenMax.to animation but it seems not to work. Why? export const AnimatedLine = ({ x1, y1, x2, y2, ...props }) => { const lineRef = useRef(null) useEffect(() => { if (lineRef.current) { TweenMax.to(lineRef.current, 1, { x1: x1, y1: y1, x2: x2, y2: y2 }) } }, [x1, y1, x2, y2]) return <line ref={lineRef} x1={x1} y1={y1} x2={x2} y2={y2} {...props} /> } When I run it, I get: