Dj.Sunrise

I Found the issue. Gsap Pin Spacing doesnt work with IMAGE tag. It works ok with Simple div sections. I tried wrap image with div also doesnt work. Look like GSAP cant calculate the height of image correctly

Hi. I'm fighting with this issue 2 years ) Could someone please help? I need to implement multiply pinned sections one by one. The last one is overlapping next static section. The website: https://luminsmart.com Screenshot attached. I've asked before same question and Cassie Admin sent me this topic that Scrips from topic above doesnt work for me because of this line of code highlighted with red color pin: i === panels.length -1 ? false : true, Then a did for each section own srolltrigger . // // PINNED SECTIONS // ScrollTrigger.create({ trigger: '#presentation-1', start: 'top top', pin: '#presentation-1', pinSpacing: false, }); ScrollTrigger.create({ trigger: '#presentation-2', start: 'top top', pin: '#presentation-2', pinSpacing: false }); ScrollTrigger.create({ trigger: '#presentation-3', pin: '#presentation-3', pinSpacing: false }); ScrollTrigger.create({ trigger: '#presentation-4', start: 'top top', end: "bottom bottom", pin: '#presentation-4', pinSpacing: false, markers: false, }); A bit later a fixed it with setting to last section hard code to avoid overlapping: .example__item:last-child { max-height: none !important; height: auto !important; -webkit-transform: none !important; transform: none !important; } It seems to work but 50/50. When page it still loading and you go down it's overlapping, if you wait for a loading finishes that last section not overlapping. I dont have CODEPEN because in codepen everything always works ok) But in real website... Please, I need help :)

ah sorry thanks!)

@akapowl hi, have issue with static content after overlapping sections. Static goes beging overlaping section. Is there way to fix it? https://codepen.io/AlibekKulseitov/pen/XWaqbaa

Hi! I create some demo with image source. I'm trying to make pinned image sequence on GSAP 3. Reference: https://store.google.com/us/product/nest_doorbell_battery?hl=en-US#gq-overview-chap-intro-3 I've found some example but they are implemented on canvas and they user sprite. I dont need to use sprite. Example №1: https://codepen.io/osublake/pen/KKzgqKr Example №2: https://codepen.io/osublake/pen/2152a28cffe2c2c0cca8a3e47f7b21c6 I need other way. I know that's not GSAP product but I want to implement same thing Like ScrollMagic + gsap image sequence https://scrollmagic.io/examples/expert/image_sequence.htmlhttps://scrollmagic.io/examples/expert/image_sequence.html I cant figute it out, how to make it on gsap 3 only. Additional question: what's difference between canvas method or simply div with img source? Is canvas better for page speed optimization?

@GreenSock Exactly thanks!) But it should play once. According to docs it's once: true? I mean is it correct way?

Hi! I'v read articles how to control video in timeline but I dont have idea how to make same video animation like here https://store.google.com/us/product/nest_cam_battery?hl=en-US I builded some minimal demo. So what I want: Play video till 3-4 sec PAUSE, then when video in the middle of the screen of viewport it continues play.

I found this but I need play video once not repeat

I read all topics but I didnt find solution what I need. I need to play video when video on viewport and pause If user Leave the section. for example this topic have too much excess code for me.I tried to use it and it's didn't work for me. i need simple code onEntry OnLeave. Play html 5 <video>

I dont get how clippy will help me. As you can see on first section i've already create mask reaviling. But How to make it (from - To) on scroll scrub ? https://codepen.io/AlibekKulseitov/pen/jOVpLRo

Ok. All goes right for now except of one thing.. Could you expalin how to animate mask on scroll? For example from left to right on scoll scrub I have some code gsap.fromTo(".section02__header", 3, { '-webkit-mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 100%, rgba(0,0,0,0) 150%, rgba(0,0,0,0) 0%)', }, { '-webkit-mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 100%, rgba(0,0,0,0) 150%, rgba(0,0,0,0) 0%)', });

First task solved :)) Now I need to addmask dissapering while scrolling down

I found this article but that's not a good idea to use inline svg. As i see on apple's website they use css gradient

Hello. Is it possible to do masked gradient reveal text or image like on https://www.apple.com/iphone-12-pro/ 1. I want to reveal first headers on page load like on iphone presentation. It's reaveling left to right. 2. Other sections i want to reveal on scroll trigger with scrub option with gradient also.

Okay let's do it step by step. The first question was about swapping images. (screen 1) to (screen 2) but I google it and found your answer there You says about opacity etc. like i did. Ok I think that's normal way and first question is solved. Let's take a look at pinned phone. I already explained how it should work. I've uplodad gif for better understanding https://imgur.com/a/ZFOz4Ba I Need it to be pinned from first to second section.