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.

Here is codepen demo https://codepen.io/AlibekKulseitov/pen/WNozxQJ So we have 3 states of Hand With Phone. a. https://imgur.com/rtx3u86 (screen 1) b. https://imgur.com/6RsJsmi (screen 2) c. https://imgur.com/653cwDM (screen 3) What I'm trying to do: 1) I did transition from (sreen 1) to (sreen 2) so stupidly . Is there a way to make it correclty instead of my method? 2) While we leaving first section (screen 2) needs to pin from bottom of the first section to the bottom of the second section 3) When we reached bottom of the second section (screen 2) needs change to (screen 3) 4) After 1-2 seconds activates new TimeLine, "hiwScene" << this const from codepen. Also Second section have to be pinned while four yellow steps won't show up. I spent much time to do that with Scroll Magic + Gsap. Now I see GSAP 3 is much better! But a bit confusing.. Would be good if I will get some help ?

@GreenSock okay should I create new topic when my codepen demo will be ready? Or it's better here?

@ZachSaucier ok nice i've added the latest green sock version. But I spent 3-4 hours I can't get how to migrate from scrollmagic + old gsap to NEW one. // init controller var controller = new ScrollMagic.Controller(); // Entry TimelineMax var mainScene = new TimelineMax(); mainScene .fromTo(".entry__table-stand", 5,{ autoAlpha: 0, left:'90%', },{ autoAlpha: 1, left: '37%' }) .to('.entry__first-hand', .1, {opacity:"0"}) .to('.fakeDiv', 4, {opacity:"0"}); // this one need for a fake 4 sec pause on main section // Entry Scene new ScrollMagic.Scene({ triggerElement: "#entry", triggerHook: 0, duration: '150%', }) .setPin("#entry") .setTween(mainScene) // set table stand tween .addIndicators({ name: "Entry Scene" }) .addTo(controller); // Pinned Phone TimelineMax var pinnedPhoneScene = new TimelineMax(); pinnedPhoneScene .set('.entry__pinned-hand', {opacity:"1"}) .to('.entry__pinned-hand', .1, {display: 'block'}) // Pinned Phone Scene new ScrollMagic.Scene({ triggerElement: "#hiw", triggerHook: 1, duration: $('#hiw').height() + 70, // pin element for the window height + 70 }) .setTween(pinnedPhoneScene) // set table stand tween .setPin(".entry__pinned-hand", {pushFollowers: false}) .addIndicators({ name: "Pinned Phone Scene" }) .addTo(controller); // Features TimelineMax var featuresScene = new TimelineMax(); featuresScene .to('.hiw__item.--a', 3, {scale:'1', opacity: '1'}, 1) .to('.hiw__item.--b', 3, {scale:'1', opacity: '1'}, 2) .to('.hiw__item.--c', 3, {scale:'1', opacity: '1'}, 3) .to('.hiw__item.--d', 3, {scale:'1', opacity: '1'}, 4) .to('.fakeDiv', 4, {opacity:"0"}); // this one need for a fake 4 sec pause on main section // Features Scene new ScrollMagic.Scene({ triggerElement: "#hiw", triggerHook: 'onEntry', duration: '100%', // pin element for the window height + 70 offset: -150 }) .setTween(featuresScene) // set table stand tween //.setPin('#hiw') // set table stand tween .addIndicators({ name: "Features Scene" }) .addTo(controller); Only what I understand that's: // init controller gsap.registerPlugin(ScrollTrigger); // Entry TimelineMax const mainScene = gsap.timeline({ // This code is wrong. it doesn't work properly scrollTrigger: { trigger: "#entry", pin: true, start: "top top", end: "bottom", scrub: 1, } }); mainScene.addLabel("start") .fromTo(".entry__table-stand", 5,{ autoAlpha: 0, left:'90%', },{ autoAlpha: 1, left: '37%' }) .to('.entry__first-hand', .1, { opacity:"0" }) .to('.fakeDiv', 4, { opacity:"0" }); // this one need for a fake 4 sec pause on main section Questions: 1) How to Pin/scrollable/fixed first section until animations on first section ends 2) How to Pin Hand with phone from first section to the end of the second section. 3) While hand with phone reaches bottom of the second section it swapes to other screenshot. 4) Then I need start new timeline hiw__item.--a, hiw__item.--b, hiw__item.--c, hiw__item.--d appears one by one (also second section is pinned)

I've uploaded website to server and I have errors on GSAP scripts. But locally it's fine. https://kulseitov.kz/sites/kami/

I'm beginner too. But I guess, try to use restart() here is an example http://codepen.io/GreenSock/pen/Dtqwz

I'm trying to make a parallax elements/background like here http://www.samsung.com/global/galaxy/wearables/gear-vr/ Is that use GSAP?