redirex

Rodrigo, wow, it's awesome and beautiful solution! Thank you a lot! ?

Hello, guys can you help me with apple effect? How i can do effect of focus parts of text by scroll like it on https://www.apple.com/ua/apple-watch-series-8/ ??

My demo: https://codepen.io/RedirexStudio/pen/GRBLgWO

I have <section class="header-section"> that already have gsap.timeline({ scrollTrigger: { trigger: ".header-section", scrub: true, pin: true, start: "top top", end: "+=100%", What i should to do for keep some element (.side-menu) to top on scrolling if script above wrapping my section to pin-spacer so this method don't help me more ScrollTrigger.create({ trigger: '.header-section', start: "top top", endTrigger: '.creations-section', // it's next section end: 'bottom top', pin: '.header-section .side-menu' }) If i add ScrollTrigger.create - it's try to keep element to top but when i scrolling page - my timeline is run and actually i scrolling my pin-spacer and i have wrong behavior with my .side-menu

Cassie, jesus... I spend all day for find solution and you solved my problem in several minutes! Thank you a lot!

I have svg mask and i want do second part animation slowly than first part. When my mask have big scale i want decrease it faster but when my logo contain to screen i should decrease speed of animation. Now my animation have same speed along all animation cycle. How is it work now: https://ko-ketka.com.ua/noar/index.html (sorry that it's not codepen i can't paste my code ) So that's my code: let windowWidth = window.innerWidth var t0 = gsap.timeline({ scrollTrigger: { trigger: ".header-section", scrub: true, pin: true, start: "top top", end: "+=100%", markers: true, } }); t0.from(".header-section .overscreen .logo_mask", {"mask-size": (windowWidth*18)+"px", "-webkit-mask-size": (windowWidth*18)+"px"}) .to(".header-section .overscreen .logo_mask", {"mask-size": "814px", "-webkit-mask-size": "814px"})