Ravi Sirswa

yes, it helpled.

Hi, I was creating an animation for client, but can't. Expected behavior: You can see that I have three red boxes. I just want to increase their heights when they are in the center of screen. I want to link it to scroll. Current problems: 1. It starts well and all the start markers update well, when height is increased. 2. But end trigger remains at the initial position. Here's demo: https://stackblitz.com/edit/stackblitz-starters-bd8qkk?description=Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine&file=src%2FApp.jsx&title=node.new Starter see attached image, as you can see end-target 1 should be 200px downwards.

It worked by changing other tweens 'from' with 'fromTo'.

@GreenSock It works for only the green box but other of the animations are not working??

@SteveS don't be sorry. I really appreciate your efforts to make my day?. Thanks a lot Steve, it seems working now.

Thanks a lot @SteveS for working as deep in this topic. but the main problem is still there. If you look at the box in first panel it starts from rotation 30, but it should not be rotated, i tried almost everything I found on internet to solve this problem. But didn't get any helpful solution. BTW you taught a nice and simple to do the work I did. Thanx for this. ??

I've created another post for same by mistake, and you are helping me there. So I'm marking this as solved.

You can see in this prototype what I want to achieve basically. https://www.figma.com/proto/UeG3PY8J3n63F2S1fnML79/Untitled?node-id=1%3A82&scaling=contain&page-id=0%3A1&starting-point-node-id=1%3A2

Thnks GreenSock, but the problem is not solved by using ImmediateRender: false and fromTo() tween yet. If you look the code sandbox you can find the first time the page loads the animation works different and if we scroll to bottom of the page and then come to top, and then go downwards animation behaves as expected. Are you able to understand this is a bit confusing. Also you can see the figma prototype. https://www.figma.com/proto/UeG3PY8J3n63F2S1fnML79/Untitled?node-id=1%3A82&scaling=contain&page-id=0%3A1&starting-point-node-id=1%3A2

https://codesandbox.io/s/naughty-rui-06693d?file=/pages/index.js You can see this link, Basically I want to animate the green box differently in all panels. I'm pinning panels and animating the box. Problem is that the first tween of box starts from the last and it doesn't inherit the values from previous tween.

Also I'm working in next js

I want to animate a position fixed image using gsap timeline and scroll trigger. Problem is that it works for two section only. I mean in the first section image fades in from 0 to .1 opacity. In second section I make the image 100% opacity. In third section it scales up to 1.5 If i remove second section it works as expected. But with the third section it starts from beginning, meaning the image doesn't starts from previous position of second section. Can anyone help me with it?