Help with logo zoom

[jillianadriana]

Hey friendly GSAP folks,

 

I am following

See the Pen zYrrYgN by GreenSock (@GreenSock) on CodePen

to create a logo that shrinks and pins on scroll but I can't get the starting position and size to be where/what I want.

 

The goal is for it to begin at full size, or at least 100% of the width of the right column, just above the line of text. And then on scroll it shrinks to the top left.

 

Should I put it in the right column div? Is that where the issue is? I had tried that previously but wasn't able to get it to go to the top left corner of the screen, just the top left of the column it was in.

See the Pen GRmJyEG by jillianadriana (@jillianadriana) on CodePen

[jillianadriana]

Just wanted to follow up. Does anyone have any advice or tips?

 

I guess I will keep playing around with it.

[_Greg _]

On 7/2/2021 at 6:22 PM, jillianadriana said:

I am following

Hi! I'm not sure that you need for this task create plugin. 

And i don't understand what animation do you want

Check my example, maybe it helps you.

See the Pen qBmbREJ?editors=0010 by gregOnCodePen (@gregOnCodePen) on CodePen

[jillianadriana]

The starting position for the logo is above the text that says "I tell compelling stories..." and then it shrinks to the top left corner on scroll.

[GreenSock]

I'm working on a solution for you, but it'll likely be this afternoon before I can get it to you. Working on a few issues. Please stand by.

[jillianadriana]

I truly appreciate that, magic Greensock man!

 

Actually, I just realized your avatar says Jack. Thanks, Jack!

[GreenSock]

I'm trying to visualize this...so you want it to sit centered above the text on the left, filling the width of that column at first? And then when you scroll past 100px, you want it to animate to a fixed position on the left (in the left column)? It seems like that'd look weird because if you make room for the logo above the text on the right, wouldn't you want the text to be lower (not centered top-to-bottom without the logo)? And then wouldn't the logo be less than 100px from the top? So it would scroll with the page initially (thus starting to go off-screen) and then once you hit 100px, it animates down and over to the left? 

 

Anything is possible, of course. 

 

If you're animating between two completely different contexts like this where you're literally changing how it flows in the document (from position: absolute to position: fixed in a different column), it's a perfect use case for Flip plugin. You'd simply set it up the way you want it to look on the right, then use a ScrollTrigger to fire a callback when it gets to 100px and in that callback you'd do a Flip animation and re-nest the element in the DOM and let Flip handle all the animation from one position to the other seamlessly. 

 

 

Flip is a membership benefit for Club GreenSock members, so you'd need to sign up to get access. You can use it as much as you want on CodePen, though, for free using this URL https://assets.codepen.io/16327/Flip.min.js

 

Here's a fork with this strategy in place: 

See the Pen LYyGroB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that more like what you wanted? 

[jillianadriana]

Now you have me questioning my design, haha.

 

You are almost correct except the shrinking has nothing to do with 100px. Basically it goes from being centred in that right column to shrinking into the typical logo position on scroll. When you scroll back up, the logo goes back to that middle spot.

 

A. Full screen hero / starting point:

 

B. The next sections below the top section/hero:

 

Does that make sense? I forgot that I ended up removing that line of text from the right column and gave it its own section, so hopefully that helps with some of your confusion.

 

Is Flip also useful for animating flexbox elements with ScrollTrigger? I have been playing around on Codepen and when I try to pin flexbox divs, they don't work very well because of the whole absolute/fixed position thing. I was also trying to see if I could get some sections to fade in while others did other things and it was just a disaster. I am having fun learning and trying to figure all of this out!

 

See the Pen gOWPmeo by jillianadriana (@jillianadriana) on CodePen

[Cassie]

Maybe something like this?

I haven't really experimented with FLIP that much so this may be the wrong way to do it.)I'm not entirely sure how to handle resizing either. I'll poke around a bit more and come back to this in a bit ☺️

See the Pen QWvyXyE?editors=1111 by GreenSock (@GreenSock) on CodePen

And yep - It works great with flexbox - the docs have a flexbox example

https://greensock.com/docs/v3/Plugins/Flip

[jillianadriana]

Yes, you nailed it! Ok, time to sign up for Club Greensock.

[Cassie]

Woo! Excited to welcome you onboard. 🥳