buster808

ok thanks, I ended up doing an animation at the bottom of the scroll which looks better than a pop up.

Excellent thanks for letting me now about MotionTricks

Hi, I want create a trail or reveal animation which comes from behind the red box as Im scrolling down. Thanks

Hi, I want to create a simple modal thats pops up when Ive scrolled to a certain position eg: center, bottom. I tried doing this with bootstrap but had a few issues. Thanks

Thank you so much for putting in the time, works perfectly on resize now. LIKEx1000000

Perfect thanks

Hi, In the animation, overwrite: true is not working with mask animation, works fine on other normal tweens. Works fine once animations are finished. Thanks for your help, always appreciated.

After browser resize the snowboarder position goes off screen and most of the time stops moving on scroll, everything else works fine, works again if I refresh the browser. Think I might add refresh browser on resize script and stop on ipad/mobile.

Hi, I have animation here https://xtracreative.co.uk/snow/ I tried putting on codepen but wouldn't work but will try again zzzzzzzz at mo. The snowboarder stops working on browser resize. I used ScrollTrigger.scrollerProxy() with native maybe this is the issue. How can i get round this. I have used two svgs and scrolltriggers for the animation. I couldn't get it too work using one SVG. Thanks

HI, How can I have mask animation and draw animation at same speed. or maybe theirs a better way to do this. Thanks

overwrite: true perfect thanks

Hi, I have two animations start and end, How can I stop or reset end if I click start. Want animations to work better if buttons are pressed quickly. Thanks

Yes thats right Rodrigo Ill try your method thanks. I see this on direction ScrollTrigger.create({ trigger: ".trigger", start: "top center", end: "+=500", onUpdate: self => console.log("direction:", self.direction) }); Reflects the moment-by-moment direction of scrolling where 1 is forward and -1 is backward. Just dont know how to code the onUpdate. My javascript is basic.

Hi, its for scrolltrigger - change start and end when scrubbing upwards. As my hero goes off screen when scrubbing upwards. Ill do a pen if this doesnt help gsap.timeline({ scrollTrigger:{ ease: "none", trigger: "#demo", start: "top +35%", end: "bottom +60%", scrub: 0.4, Thanks

Hi, how can i change start and end values when scrolling upwards with scroll trigger. I tried using onUpdate but no joy. Thanks

Hi, Ive got this working by making my path longer. also smoothed animation from here ScrollTrigger.scrollerProxy()

Hi, how can I keep the snowboard in the middle when a user is scrolling. I want to keep the easing effect when setting scrub:1 or maybe theres another way to have easing as well as keeping snowboard in the middle of screen. Thanks for any help.

Ive got this working mostly but it doesn't work on-load like css media queries. function addMQListener(mq, callback) { if (mq.addEventListener) { mq.addEventListener("change", callback); } else { mq.addListener(callback); } } addMQListener(window.matchMedia("(min-width: 768px)"), event => { if (event.matches) { gsap.timeline() .from("#main-hero", {x:50, duration:1, opacity:0, ease:"circ.out", delay:0.5}) .from("#inspired", {x:100, duration:1, opacity:0, ease:"circ.out"}) } else { .from("#main-hero", {y:50, duration:1, opacity:0, ease:"circ.out", delay:0.5}) .from("#inspired", {y:100, duration:1, opacity:0, ease:"circ.out"}) } } );

Hi, Ive gone through previous threads but cant get this to work. I want to change timeline settings if on mobile. Do I need to kill one timeline then start another? gsap.timeline() .from("#main-hero", {x:50, duration:1, opacity:0, ease:"circ.out", delay:0.5}) .from("#inspired", {x:100, duration:1, opacity:0, ease:"circ.out"}) .from("#digital", {x:-100, duration:1, opacity:0, ease:"circ.out"}, "-=0.8") .from("#design", {x:100, duration:1, opacity:0, ease:"circ.out"}, "-=0.8") Thanks for any help

Hi, PointC I want the above clouds animation as a background animation also the animation affects other svg's I have on the page. Ive tried changing code but no cigar. Thanks for any help.

Thanks Mikel much appreciated.

Hi, this is code from a tutorial and am having difficulty understanding it. I want the bus to start offscreen from the left and finish to the right. Thanks for any help.

Its working now. I added lots of dummy text at the bottom so scroll can be triggered dah

Hi, If Im using an html img like below Scrolltrigger works fine while targeting fred: <img class="fred" src='images/fred.svg'> But what I want to do is for scrolltrigger to work on a group that has a clippath while targeting shutter (This doesn't work). <g id="clipPathReveal" clip-path="url(#theClipPath)"> <g class="Shutter"> </g> Thanks

Thanks PointC excellent, I'll make sure to ask for help quicker next time.