[How to add Navigation Menu to control the staggered card]

You can use scrollTo plugin to scroll to certain element, but because you are animating sections, you can't use them as reference. Instead, you need to wrap them in another wrapper so you can use this wrapper in scrollTo.

See the Pen jOReGmM by SahilAFX (@SahilAFX) on CodePen

[ScrollSmoother with background-attachment: fixed]

Fixed background only works if element and any of its parent element doesn't have any transform applied or doesn't have position set to fixed. In order to create scroll effect, ScrollSmoother wraps content in a fixed parent, you can see this by inspecting from dev tools.

 

To achieve this effect in ScrollSmoother, you will need to position the image manually.

See the Pen GRLXaGJ by SahilAFX (@SahilAFX) on CodePen

 

[MotionPath and Scale]

There you go

See the Pen eYojXbm by SahilAFX (@SahilAFX) on CodePen

 

I have set fixed dimensions for container for demo. When you make it responsive, you will need to change the value by which you divide pos.y. You can use getBBox method of svg to get current height of the path.  You will need to tweak animation and calculation for desired effect.

[MotionPath and Scale]

Ya, if you want to use ease then use this.ratio instead of progress. It will give you actual value that is being used to apply ease, it can go beyond 1 on certain eases. To get individual progress, use a loop to create tween for each orb.

Additionally, now that I rethink your goal, it is a bit too complex. It would be easy to create this effect by manually calculating position of orbs and rotating them around. If you still want to use MotionPath and ease then you may have to use getPositionOnPath and use these values to calculate scale, this way scale won't be tied to progress.

[MotionPath and Scale]

To get  progress inside the modifier function, use regular function. Arrow function will inherit value for 'this' from enclosing scope, so in this case it will be window, if you use regular function then you can get progress using 'this.progress()'. z-index, you need to swap orbs manually.

[ScrollTrigger Not Pinning]

You can achieve that with position sticky, you need to set top property as well for it to work. Check updated demo.

[ScrollTrigger Not Pinning]

It does pin as expected but not visible because background image is not set on second section. Instead, after setting bg I see that 2nd section is not unpinning because it is shorter than other sections. Setting end to "+=100%" unpins it correctly.

See the Pen oNOdMQd by SahilAFX (@SahilAFX) on CodePen

[Animating Flexbox Order Transition with GSAP FLIP]

I think this is what you are trying to achieve, check comments for explanation.

See the Pen xxejZqy by SahilAFX (@SahilAFX) on CodePen

[Element getting random offset on Flip]

Use absolute: true, in Flip.fit, it will fix the jump.

[ScrollTrigger vertical image panel scrolling]

Because you are setting ease none on the set tween instead of to tween, so by default it animates with 'Power1.out' ease and slows down at end.

[Draggable question/suggestion]

You can simply set position of nav on resize. Also, you don't need to recreate draggable on each resize, you could update snap value like in example below or use function to calculate snap position. (Check docs to see how to use function to calculate snap value.)

See the Pen eYXGPOa by Sahil89 (@Sahil89) on CodePen

[Can gsap switch from % to px automatically while setting transform origin?]

Hi,

Sorry can't provide a demo. I am trying to debug an odd behavior in complex project. We have all our transformOrigin values set in % and nowhere we specifically set transformOrigin in pixels but in one scenario values change from % to px. While changing to pixels, transform origin gets calculated correctly as 50% but gets set as pixels, so if div has 300px width, transform origin gets set to 150px. Is it a known behavior or in any scenario gsap will choose to switch to pixels?

[Draggable with inertia(throwProps) no longer supports ease?]

In past I used to use "power4.out", which is not big difference to "power3.out". Though I wanted option for other eases now because I am working on a carousel project with ability for customization and ability for different eases was one of the option was requirement.

 

Also, I am using drag direction as input to change slide. If I throw and snap, then snap looks as you would normally expect but if I snap to next slide using little drag, then next slide snaps without "back" ease kind of effect so I also wanted to address this using ease option.

I think I could still achieve it by using extra tweens but I wanted to keep all logic in one place. Anyway, I think it won't be possible as inertia plugin doesn't support to method. I will later check if I can intercept and mimic effect I want. Thanks

[Draggable with inertia(throwProps) no longer supports ease?]

Hi,

Working with draggable after some long time. I wanted to use an ease on draggable in some situations but seems like it's no longer supported. I think  because of inertia plugin doesn't have to method?

 

Quote

Anything that directly references ThrowPropsPlugin (it's renamed InertiaPlugin and it doesn't have a .to() method attached to it

 

Though I was curious if it's still possible to add support for easing? I have attached old and new reduced test case.

 

Please let me know.

 

Thanks,

Sahil

 

gsap 2.x

See the Pen ZEaqxMz?editors=0010 by Sahil89 (@Sahil89) on CodePen

See the Pen BamqrPP?editors=0110 by Sahil89 (@Sahil89) on CodePen

[Tweenmax code works on Codepen but not on localhost]

Your ".box" element is covered by rest of the content, so mouse never moves over it. Try setting event on ".home" or some other element that won't be covered content, ".home" is container so it should work fine.

 

Load TweenMax(or any other library that your code depends on) before your code. The TweenMax version you are using is really old, if you want to use GSAP 2 then use version 2.1.3 or use GSAP 3.

 

https://cdnjs.com/libraries/gsap/3.1.1

[Manually Stop Spin Wheel using Server Response]

Track velocity using inertia plugin , then tween to end value using inertia plugin. I am using GSAP 3 in new demo, using getProperty in place of _gsTransform.

 

See the Pen povYRpN?editors=0010 by Sahil89 (@Sahil89) on CodePen

[Restore cursor position]

You can use cookies and trigger the mousemove event by creating jQuery's event.

 

https://jsfiddle.net/ds6t5zec/1/

 

Instead of triggering event you can just set the cursors position on load so it won't animate from (0, 0).  A better way would to just animate cursor in on first event, like scale it up where mouse is. That way you won't have to worry about cookies and it also takes care of how cursor animates when user visits for the first time. I had to use quickSetter method to avoid overwriting transform as it will interrupt scaling animation.

 

https://jsfiddle.net/gpnta9oL/13/

 

 

[Infinite rotation starting with easeOut and ending infinite with ease linear]

1) You could use just tweens as it needs fewer calls.

2) Ya that won't cause any conflict as long as you aren't trying to animate same properties at the same time.

[Console is returning: Failed to load gsap.min.js.map]

I had to deal with this "issue" as well, I didn't go through entire code but for some reason ScrollMagic tries to update tween twice, then detects it as overwrite and tries to call onOverwrite method which has been removed from gsap 3. Certainly not related to GSAP and those are just warnings, you can ignore them without any issue. There are other compatibility issues, for example ScrollMagic tries to use 'Tween' object when you try to update scene duration on the fly, this gives error. You can set Tween equal to gsap directly in ScrollMagic files.

[Infinite rotation starting with easeOut and ending infinite with ease linear]

Seems like GSDevtools was causing some conflict, removing it fixed the issue.

 

See the Pen VwYWeZX by Sahil89 (@Sahil89) on CodePen

[Infinite rotation starting with easeOut and ending infinite with ease linear]

With GSAP 2 it was possible to animate timeScale,

 

See the Pen qBEjOBb?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Same trick doesn't work with GSAP 3

 

See the Pen mdywJgW?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

@GreenSock has something changed with timeScale in gsap 3?

[ColorPropsPlugin]

See the Pen ExaXjmr?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

You no longer need colorProps plugin, gsap will detect color strings and animate them. From release notes

 

Quote

The core engine will find colors inside complex strings and animate them properly (no plugins necessary). And of course it'll find all the numbers inside complex strings and animate those as well.  

 

There is also new utility method called splitColor that you may find useful.

[Infinite rotation starting with easeOut and ending infinite with ease linear]

Use timeline where both tweens start at the same time, make rotation tween infinite. (you can use two tweens directly without timeline)

 

See the Pen povwvMr?editors=0010 by Sahil89 (@Sahil89) on CodePen

[Slowly play animation and speed up on scroll event and also reverse]

See the Pen OJPmedr?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

You may want to use infinite loop like in this demo this demo and apply this logic on it instead of using such large svg, because after some idle time there is nothing to animate.

 

hi @ZachSaucier even if I add codepen as link, it gets embedded. (second demo was supposed to be link)

[Visibilty hidden not working]

You have spelling mistake, try visibility

 

tl.set("#splash", {visibility:"hidden"})