Top and Bottom animate reveal banner

[Diogo Silva]

 

Good morning, I need some help.

 

I created an animation with Greensock to reveal a banner with two divs. I needed a help to make that, when scrolling the page, the red div open from top to bottom and the blue div from bottom to top.

 

Can you help me?

 

Thanks

See the Pen JajKXj by diogosilvasantana (@diogosilvasantana) on CodePen

[Sahil]

You can improve your animation performance and shorten your code.

 

1. You are trying animate height, which triggers layout recalculation. Instead you can scale the divs.

2. I am setting different transform origin for both divs, which determines in which direction they will shrink.

3. GSAP works really well with ScrollMagic, you can pass a timeline that contains multiple tweens instead of creating multiple scenes.

4. I am setting position parameter for both tweens to zero so they will start at the same time.

5. You were using old syntax by wrapping your css vars in css object, it is valid but no longer required so you can just pass your css var in object like I did.

6. When experimenting with ScrollMagic, turn on indicators so you get idea when your animations trigger.

7. Also, the class that you are using as trigger element is not present in your html.

 

See the Pen YOzWLV?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

https://greensock.com/docs/Plugins/CSSPlugin

 

https://greensock.com/docs/TimelineMax

 

To learn more you can check the docs, learning page or visit the youtube channel to watch some handy tutorials. Feel free to post if you have any follow-up questions.

[Diogo Silva]

5 hours ago, Sahil said:

Você pode melhorar seu desempenho de animação e encurtar seu código.

 

1. Você está tentando a altura do animate, que aciona o recálculo do layout. Em vez disso, você pode dimensionar os divs.

2. Estou configurando uma origem de transformação diferente para ambas as divs, que determina em qual direção elas irão encolher.

3. GSAP funciona muito bem com ScrollMagic, você pode passar uma linha do tempo que contém várias interpolações em vez de criar várias cenas.

4. Estou configurando o parâmetro de posição para as duas interpolações como zero, para que elas comecem ao mesmo tempo.

5. Você estava usando a sintaxe antiga envolvendo o seu css vars no objeto css, ele é válido, mas não é mais necessário, portanto você pode simplesmente passar seu objeto css var como eu fiz.

6. Ao experimentar com o ScrollMagic, ative os indicadores para que você tenha ideia de quando suas animações são acionadas.

 

See the Pen YOzWLV?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

https://greensock.com/docs/Plugins/CSSPlugin

 

https://greensock.com/docs/TimelineMax

 

Para saber mais, você pode verificar os documentos , a página de aprendizagem ou visitar o canal do youtube para assistir alguns tutoriais úteis. Sinta-se à vontade para postar se você tiver alguma pergunta de acompanhamento.

 

Thanks Sahil.