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!

I've tried to do that, but its not working for me. https://codepen.io/davicoo/pen/NWWZvYE

I'm not having much luck addinging the scrolling code. I'm not sure how to call the timeline after taking out the animation.play(); function resizeCanvas(textures) { var texture = textures[0]; sprite.textures = textures; canvas.width = texture.naturalWidth || texture.width; canvas.height = texture.naturalHeight || texture.height; canvas.classList.add("is-loaded"); var aspectRatio = canvas.height / canvas.width; // Make it responsive TweenLite.set("#container", { paddingBottom: "calc(100% * " + aspectRatio + ")" }); // We're ready to go! //animation.play(); } $(window).scroll( function(){ var scrollTop = $(window).scrollTop(); var docHeight = $(document).height(); var winHeight = $(window).height(); if( scrollTop >= 0){ animation.progress( scrollTop / ( docHeight - winHeight ) ); } } ); I am probable way off

Is there a pace to lean the ways to address controlling a timeline ? I'm just not sure how its controlled even in the original the timeline: var tl = new TimelineMax({paused:true}); then the function calls tl.to( '#image-sequence' , dur , {css: {backgroundImage: imgUrl}} ) and then the scroll (window).scroll( function(){ var scrollTop = $(window).scrollTop(); var docHeight = $(document).height(); var winHeight = $(window).height(); if( scrollTop >= 0){ tl.progress( scrollTop / ( docHeight - winHeight ) ); } } ); How does the scroll control the timeline?

Thank You So Much!! This is fantastic! It works amazingly well!! ( No flicker) PS: how come your canvas works on Apple OSX and IOS, When so many people i've seen cant get ot to?( Very Impressive)

Thanks for the reply, I do appreciate it! Maybe i'm not putting that code in properly, but this seems to make the fliker worse in Safari and now it also does it in Chrome. also I'm not sure how to change it to real images? do you know of any examples I could look at ? and again!

The reason is that the image src for each frame is being downloaded on demand (when the tween calls for it). You can try creating new image instances in your for loop to get the image into the browser's cache, like this.Thank you so much for the help, I had been looking for an example of how to do this sequence for some time now, and this we the only one i could find. If anyone knows of a better way I would love to try it out ( i did try one with canvas but I could not get it to work well in Safari at all. ) Edit: in some tests here ... it's working, in other test, it's not. So, maybe a better option would be to actually add all the images to the DOM and tween then on/off. (CodePen to follow)

This TimelineMax Image sequence flickers in macos Safari, any help would be fantastic !

Cool! Thanks Jack!

I'm not sure how to change the TransformItem's properties since there dynamically created clones? and also not sure how to use the updateSelection method, but I'm defiantly not doing it right here: ( I've used the name of my Transfommanager ) for (var i: int = 0; i < items.length; i++) {TweenLite.to(items[i].target, 0.75,{x:picCenter_x,, width:myw, height:mph}); manager.updateSelection(); }