[Modal on Scroll Position]

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

[Guidance on creating trail animation or reveal with Scrolltrigger]

Excellent thanks for letting me now about MotionTricks

[Guidance on creating trail animation or reveal with Scrolltrigger]

Hi,

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

 

Thanks

See the Pen vYxGQjd by buster808 (@buster808) on CodePen

[Modal on Scroll Position]

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

See the Pen vYxGQjd by buster808 (@buster808) on CodePen

[Animation stops on browser resize.]

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

 

 

[overwrite: true not working with mask animation]

Perfect thanks

[overwrite: true not working with mask animation]

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.

See the Pen OJpNLKZ by buster808 (@buster808) on CodePen

[Animation stops on browser resize.]

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.

[Animation stops on browser resize.]

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

See the Pen mdWVKYq by buster808 (@buster808) on CodePen

[Mask and Draw animation at same speed]

HI,

How can I have mask animation and draw animation at same speed.

or maybe theirs a better way to do this.

 

Thanks

See the Pen wvJMqZd by buster808 (@buster808) on CodePen

[OnClick reset animation before playing another.]

overwrite: true perfect thanks

[OnClick reset animation before playing another.]

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

See the Pen gOmazwa by buster808 (@buster808) on CodePen

[using onUpdate when scrubbing upwards with scrolltrigger]

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.
 

[using onUpdate when scrubbing upwards with scrolltrigger]

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

[using onUpdate when scrubbing upwards with scrolltrigger]

Hi, how can i change start and end values when scrolling upwards with scroll trigger.

I tried using onUpdate but no joy.

 

Thanks

[Keep hero in the middle using Scolltrigger and Motionpath]

Hi, Ive got this working by making my path longer.

 

also smoothed animation from here ScrollTrigger.scrollerProxy()

 

[Keep hero in the middle using Scolltrigger and Motionpath]

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.

See the Pen mdRZjYL by buster808 (@buster808) on CodePen

[Change timeline settings on resize]

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"})
    }
  }
);

[Change timeline settings on resize]

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

[Seamless loop clouds from offscreen]

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.

[Animation start offscreen from the left. ScrollTrigger]

Thanks Mikel much appreciated.

[Animation start offscreen from the left. ScrollTrigger]

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.

See the Pen yLgVqba by buster808 (@buster808) on CodePen

[Working with elements and Scroll trigger]

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

[Working with elements and Scroll trigger]

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

[Animation inside clip or mask]

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