Demo available

[AntonioNB4]

Is there a demo of the scroll effects at 0.23 sec of the video below ?

 

 

[Cassie]

Hi there - all the websites featured in here are by independent agencies, we don't have access or permission to distribute any of the code.

That being said, if I have the correct timestand (screenshot attached) the animation at 0.23 doesn't look complex at all, just some scaling and a nice expo.out ease.

If it's the AAWUM site, why don't you set up a codepen with the HTML markup and styling and I can give you a hand with it?

[AntonioNB4]

Hi Cassie, 

I will try and update you

[AntonioNB4]

Hi @Cassie,

i created something like this 

See the Pen YzRyzzB by Antonio-Nocella (@Antonio-Nocella) on CodePen

I need to scale the text to the size of its parent container. 
Then there remains the rest of the animation, which is honestly a little more difficult for me.

[mvaneijgen]

2 hours ago, AntonioNB4 said:

I need to scale the text to the size of its parent container. 

There isn't a way to do that easily, you have to calculate how much that is and then implement that in your animation. There are container queries now https://caniuse.com/css-container-queries, so maybe that will help, but you will still have to style it correctly and write the logic. 

 

It could also be useful the reverse the animation so instead of scaling up the animation, start with the big version an let GSAP animate from small. This way the scale doesn't become some weird value like 4 but it always is between 0 and 1.

 

For the rest of the animations you could look in to clip-path tweens, hear some tropics on the forum with useful info. Hope it helps and happy tweening! 

 

Something like this. Where I've set the font-size to 8vw, which seems for this specific text with this font

See the Pen zYMvEBq by mvaneijgen (@mvaneijgen) on CodePen

[AntonioNB4]

Could be a solution. Seems work. I need only last thing. After the scaling of the header i need to move it form the center of container to the top .

Its possible ?

[Cassie]

Sure, why don't you give it a go, feel free to ask about any part of it that's confusing you!

 

It's often more beneficial to step through it yourself.

[AntonioNB4]

2 hours ago, Cassie said:

Sure, why don't you give it a go, feel free to ask about any part of it that's confusing you!

 

It's often more beneficial to step through it yourself.

I did something like this. Please give me any suggestion or enhancements are welcome,  beacuse i dont know if heading goes exactly to the top of the container.

See the Pen QWJjRoW by Antonio-Nocella (@Antonio-Nocella) on CodePen

[mvaneijgen]

Hey @AntonioNB4, I've put some comments in your javascript code with explanations. The first thing is I don't see any use for more timelines, this can all be just one big timeline that plays in order.

 

I would either use the position parameter or delays not both, I'll think if you use both you'll will get lost faster on what is influencing what tween.

 

Instead of yPercent (which uses the height of the target element) I've used just the y: property. In there I use a function based value which gets the height of the parent (#preloader) and the height of the target element, then half that value, because you're item is already in the middle and moves that element, this is just basic math to get the pixel value the element needs to move. Hope it helps and happy tweening! 

 

See the Pen bGQVXVW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[AntonioNB4]

Thank you mvaneijgen. I didn't think i can do it with one big timeline that plays in order. Very helpful

[mvaneijgen]

1 minute ago, AntonioNB4 said:

I didn't think i can do it with one big timeline that plays in order

Well that is what GSAP is made for! You can write animations like you would draw a flip book and it will automatically put all the animations in order for you, no matter how complex or simple you want them to be! Good luck and happy tweening!

[Cassie]

Great guidance @mvaneijgen 💚

[AntonioNB4]

Hi @mvaneijgen,

If i  want to change the end position, as it rises to the top, instead of in the centre top but left top how can I do it ?

[Rodrigo]

Hi,

 

I'm not completely sure I follow what you're trying to do. Maybe something like this:

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

 

Hopefully this helps. If not, please be as specific as you can in terms what you're trying to achieve.

Happy Tweening!

[AntonioNB4]

See the Pen bGQVXVW by mvaneijgen (@mvaneijgen) on CodePen

 

it should start as in codepen but when it goes up it must move not only upwards in the container but simultaneously to the left to stop at the top left corner.

[Rodrigo]

Hi,

 

Sorry but I still don't understand what you're trying to achieve here. In the codepen example I posted and the latest one you posted the text ends at the top of the viewport. It doesn't end at the left end because of the styles you have applied.

 

I think @mvaneijgen's advice is the best course of action here. Set up the styles so the element is at the final position and then create a from() instance to move it from the position you want or create a set instance to move it to a specific starting position.

 

I updated the codepen example:

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

 

Hopefully this helps.

Happy Tweening!

[AntonioNB4]

Its perfect  ty to all