liflor

Hello! How to make third position of tween? I need to move text elements on scroll and only one of text elements should have an opacity 1. By default, it has an opacity of 0.45 - it should grow to 1 in the middle of the parent block - and go back to 0.45 when it scrolled out of view.

OMG! I complicate things, I can use from and to for lottie too ?

Hello! Thanks for your response! I saw these examples, but I don’t understand how to connect this with lottie. I simplified the description and example, now my main problem is to start the lottie from a specific moment on scroll.

Hi! Thank you, I simplified the description and example.

Hello! I don't understand how to make animation. Here is idea: 1) After page load playing some animation 3) After first scroll lottie play from specific frame to the end. This part of timeline should play revers on scroll up. So, may be i need to change html structure? Anyway, I don't have any idea how to implement it in gsap. Is it possible?

Hello! Thank you so much! It helps me!

Hi! I just start learning gsap and have some problems with synchronization inside timeline. So, here is idea: 1) Element hero-title-trigger-1($gradientTitle) on scroll transforming(scale, move); 2) Elements hero-title-trigger-2 word on scroll move from bottom; 3) Header&hero-buttons appear and lottie start playing in the same time. Lottie should play directly(on top to bottom scroll) and reverse (on bottom to top scroll); But lottie start playing from the start of time line. And i just want to have something like additional tween for lottie.play(). And additional question: after page reload i can see $gradientTitle element. Just after start scrolling it move to "from" position and tween start playing. Is it possible to fix it? Or just add additional timeline for this, not triggered by scroll. What i am doing wrong? Thanks for your help! <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LYXoPpe" data-user="lilyashaZaya" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/lilyashaZaya/pen/LYXoPpe"> ScrollTrigger / Lottie / MatchMedia</a> by lilyasha (<a href="https://codepen.io/lilyashaZaya">@lilyashaZaya</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>