Dcoo

Thank you for the reply, and i'm sorry if I came off rude. have a great day

Using a hex color it works great, I'm just not sure if using gradients is possible

when I use a hex it works great, I was just wondering is it could do gradients as well I tried this but it failed badly :) gsap.registerPlugin(ScrollTrigger); window.addEventListener("load", function () { const scrollColorElems = document.querySelectorAll("[data-scrollcolor]"); scrollColorElems.forEach((colorSection, i) => { const prevColor = i === 0 ? "linear-gradient(180deg, #FBD786 0%, #f7797d 85%)" : scrollColorElems[i - 1].dataset.scrollcolor; ScrollTrigger.create({ trigger: colorSection, start: "top bottom", onEnter: () => gsap.to("body", { backgroundColor: colorSection.dataset.scrollcolor, overwrite: "auto" }), onLeaveBack: () => gsap.to("body", { background-image: prevColor, overwrite: "auto" }) }); }); });

I'm not sure that helps but good to know. ...I still can't tell if gradients with data-scrollcolor think I have here ? data-scrollcolor="linear-gradient(90deg, #46224e 0%, #30184f 85%)" ) gsap.registerPlugin(ScrollTrigger); window.addEventListener("load", function () { const scrollColorElems = document.querySelectorAll("[data-scrollcolor]"); scrollColorElems.forEach((colorSection, i) => { const prevColor = i === 0 ? "linear-gradient(90deg, #46224e 0%, #30184f 85%)"" : scrollColorElems[i - 1].dataset.scrollcolor; ScrollTrigger.create({ trigger: colorSection, start: "top bottom", onEnter: () => gsap.to("body", { backgroundColor: colorSection.dataset.scrollcolor, overwrite: "auto" }), onLeaveBack: () => gsap.to("body", { backgroundColor: prevColor, overwrite: "auto" }) }); }); });

is it possible for scrollColorElems to use gradients? html <div id="section1" class="mymodeheader-newmods mytop"><img class="hero__image" data-scrollcolor="linear-gradient(90deg, #46224e 0%, #30184f 85%)" ) src="https://parkviewhomes.info/energy-star/banner-top-01.svg" alt="" /></div> window.addEventListener("load", function () { const scrollColorElems = document.querySelectorAll("[data-scrollcolor]"); scrollColorElems.forEach((colorSection, i) => { const prevColor = i === 0 ? "#1b1521" : scrollColorElems[i - 1].dataset.scrollcolor; ScrollTrigger.create({ trigger: colorSection, start: "top bottom", onEnter: () => gsap.to("body", { backgroundColor: colorSection.dataset.scrollcolor, overwrite: "auto" }), onLeaveBack: () => gsap.to("body", { backgroundColor: prevColor, overwrite: "auto" }) }); }); });

Im not sure of the best way to run 2 gsap.timelines run at the same time? I don't get an error but my second gsap.timeline ( var animation_mob = new gsap.timeline ) will not load. it more then likely its my naming of the second timelines variables is causing the problem. but maybe you can't run 2. timelines with 2 canvas ? any feed back would be greatly appreciated! cheers!

Thanks Zach, Ive updated API syntax, and Ill try the "Breakpoint" !

https://codepen.io/davicoo/pen/GRjybaE Would it be possible to change the baseURL for an image sequence within GSAP? Right now I'm working on running two TimelineMax and two canvas tags and switching display on mobile( its not actually working yet ) , that way I only need change the baseUR for mobile or browser ( the mobile image sequence is rendered at a different ratio).

"I edited out your demo preview". Sorry about that, I should have know. Thank you for that, I will try to upgrading to GSAP 3, Im just easing into cheers!

With TimelineMax can you control speed of image sequence? ( I have exported this video at 24 fps) Fast motion - seizure warning: https://cdpn.io/davicoo/pen/MWjmxPp

Thank you! That’s got it !

I've been trying to use this same principle as in this post, but with images inside an svg. but my first slide doesn't start for a smoe time... wel 15-20 seconds. any help would be lovely.

I did try that, it didn't seem to do anything but make it less smooth , unless i'm not putting it in correctly? var animation = new TimelineMax({ paused: true, onUpdate: drawSprite }) .to(sprite, 1, { frame: sprite.totalFrames - 1, roundProps: "frame", ease: "power2.out" }); i'll try a combo of that and smooth scrolling script smooth scrolling script Thank you!

Oh sorry, no not momentum of the scroll bar itself, but the animation of the onscroll sequence, so it will play out some extra frames and slow to a stop. the original canvas I was playing around with( link below: and this one doesn't work on a mac at all ) had something like this , I think its this bit here. i'm wondering if TweenMax could do something similar ? // the throttled funtion function draw() { var e = evt; var delta = Math.max(-1, Math.min(1, e.deltaY)); if (delta == -1) currentLocation += 1; if (delta == 1) currentLocation -= 1; if (currentLocation < 0) currentLocation = 0; if (currentLocation >= (totalImages - 1)) currentLocation = (totalImages - 1); setImage(currentLocation); evt = null; // so the throttler knows we can kick again } } https://codepen.io/davicoo/pen/rNNRjge

Im wondering if there is a way to make the sequence have momentum as you scroll? so it woud slow to a stop instead of stopping right away? Hey and Guys, thanks again for all your help!