Scale image and set it to it's original position

[Redcase Software]

Hello everyone,

I want to scale down the size of my image first ( I accomplish this. I have my desired starting point).

Then i want to pin the image until it reaches 100% of the viewport. 

And last i want to set it to its original position which is after the text "LET THE".

I thought that it better to have my original position as my final destination and use the fromTo and from methods. But my problem is, that right now i can't pin my image until it reaches its full width. 

Actually, i want to do something similar to this page -> https://wearemotto.com/ 

Any advice?

Thank you in advance for your time!

See the Pen bGxqZev by pmakos (@pmakos) on CodePen

[Rodrigo]

Hi,

 

I think a better approach is to first create the HTML/CSS in the way you want it to look at the end, that is with the image next to the text and all the responsive stuff taken care of.

 

Then create the animation without ScrollTrigger, it might sound weird but is the best way to go. ScrollTrigger just controls an animation based on the scroll position of the viewport, nothing more. So is better to have the animation working as you expect and then add ScrollTrigger into the mix.

 

Sorry I can't be of more assistance, but I don't have enough time right now to fiddle with your example in order to fix the HTML/CSS, but you should come up with a layout that puts the image where you want it to end (kind of right now) but in a way that actually reflects what you're trying to achieve. If you remove the timeline you'll see that you're not far behind that. Then you have to consider the ScrollTrigger instance.

 

Happy Tweening!

[Redcase Software]

9 hours ago, Rodrigo said:

I think a better approach is to first create the HTML/CSS in the way you want it to look at the end, that is with the image next to the text and all the responsive stuff taken care of.

I think so too. But I wanted one more opinion. Thank you.

I will try without the ScrollTrigger and come back again.

[Redcase Software]

Hello once again, 
I have changed the code a bit (You can check the same codepen link). I changed the html and set my image element to another place so that it's easier to set its final position. 
So, right now I have my desire animation kind of. But I can't find a way to pin my element until the first timeline's animation has finished.
Unfortunately, I can't find a way to have the animation on Scroll without the ScrollTrigger.. It's like I want the element to be pinned in the first animation and somehow unpinned in the second.

[mvaneijgen]

@Redcase Software I would recommend forking your pen instead of overwriting the same one. When I build something I sometimes in the end have 20 versions of the same pen and while making it I'll be hopping from version to version if I screw something up or if my 'new' idea doesn't pan out. 

 

This ended up being quite the math gymnastics. Instead of pinning the element we could move it down over the same time we scale it up, this will create the illusion of it being pinned, but for this we need the distance that it needs to travel and the time the tween takes. The distance is easy, just the full length of the ScrollTrigger duration, we can calculate that by getting the ScrollTrigger .end and .start value and subtracting those from each other. 

 

Both your tweens have a duration of 4 which doesn't mean much when working with ScrollTrigger, they could be 0.1 seconds or 10000000 seconds the ScrollTrigger will still end up looking the same. But because we know they are both 4 seconds that will make the full timeline take up 8 seconds, 4 equals 50% of 8, which makes that if we calculate the total ScrollTrigger distance * 0.5, we'll get the value of half the total scroll distance. If we feed that value to the y: property and make that tween play at the same time as the scale tween it will look like it is stuck on the page. Note that I've set ease: "none", tweens without an ease have the default of "power1.out" which sometimes is not preferred when hooking an animation to scroll.

 

I've sprinkled in some comments in your pen to better explain what certain additions do. Hope it helps and happy tweening! 

 

Side note: it seems to work here, but you should never animate your trigger element. ScrollTrigger uses this to do all its calculations. It's better to wrap this all up in a parent element and use that as its trigger. 

 

See the Pen KKxymgL?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Redcase Software]

Once again incredibly informative. 
Thank you so much for your time!
I now have exactly the result I wanted.
Very clever work around.