[scrollTrigger: progress bar become full and empty in different duration]

Hey Mo!

Something like this?

const tlBar = gsap.timeline({paused: true})

tlBar.from('.two span',{
    scaleX:0,
    transformOrigin: "left center", 
})

ScrollTrigger.create({
  trigger:'.two',
  start:'center center',
  markers:true,
  onEnter: () => {
    tlBar.play().duration(15)
  },
  onLeaveBack: () => {
    tlBar.reverse().duration(5)
  }
});

 

[Locomotive scroll + GSAP, randomly cut the page]

Thanks for the prompt reply, I'll check locomotive's GH comments maybe other users experienced this as well.

[Locomotive scroll + GSAP, randomly cut the page]

Hello @akapowl Thanks for the pen above, any idea why the scroll event is not detected when the cursor is on the navbar "area" (setting the navbar height to 100px makes it easy to see).

Setting a lower z-index solves it in some way but navbar is not anymore on top of the main container.

 

Thanks for your help.

[How to pause a timeline to play another one?]

48 minutes ago, Cassie said:

It's been really fun watching your progress on this @awazigh

Many thanks @Cassie you made this possible! I'm working on the demo sent by Craig 🤓  can't wait to show the final version in prod 🤩

[How to pause a timeline to play another one?]

Thanks for the direction, I'll check this demo and try to adapt to mine.

[Repeat rotate wit yoyo issue]

@leenalfalah @Ali Manuel

 

or maybe this way:

 

let tl = gsap.to(".cl", {
  rotation: 360, 
  ease: "none", 
  transformOrigin: "50% 50%",
  repeat: -1 
});
 

[How to pause a timeline to play another one?]

Hi Everyone!

Further to the previous progress thanks to @Cassie @GreenSock & @PointC, I'm trying to optimise my animation by adding a pause to play another tween. I tried with the callback "addPause()" but as you can see it seems that the animation can't be "paused" in the middle, it has to be completed and then it pauses.

Is there a way to pause at anytime? and even if my animation is based on motionpath?

 

Thanks

Awa

See the Pen jOBxGoq by awazigh (@awazigh) on CodePen

[MotionPath Infinity Tween]

41 minutes ago, GreenSock said:

zIndex can only be integers and you're only having it tween from 0 to 2, thus there are really only 3 options (0, 1, or 2) over the course of the whole animation but you have 10 elements. So try animating to a bigger zIndex so there are more variations. Like 20 or 200. Does that help? 

cristal clear thank you 👍🏽 

[MotionPath Infinity Tween]

@PointC @GreenSock an additional question plz: I forked the version from Jack for some adjustments, but I'm struggling to get the card in "front" on top on the others, weirdly sometimes they are correctly on top at the beginning and then it's broken.

I tried playing with the "zIndex" but no luck, what do you think?

See the Pen jOBxGoq by awazigh (@awazigh) on CodePen

[MotionPath Infinity Tween]

Many thanks to both of you @GreenSock @PointC much appreciated it, this community is just amazing 💚

[MotionPath Infinity Tween]

Hello Everyone,

In a previous post @Cassie kindly helped me to fix a symmetrical animation that I'm trying to convert as an infinity (symbol) animation, it's kind of work but I can't make the each of the 10 circles scale down smoothly in the middle of the symbol and then scale up on the 2 extremities.

@Cassie if you stop by, love would your help on this 😬

 

Many thanks

Awa

See the Pen MWpGmzb by awazigh (@awazigh) on CodePen

[MotionPath Symmetrical possible?]

Great!! Many thanks @Cassie ☺️ aka "Rosie the Riveter" 😁  you made my day 🥳

[MotionPath Symmetrical possible?]

12 minutes ago, Cassie said:

Good job!

one last question @Cassie I swear 😇  do you know the 2 animations are not playing at the same time (synchronised)? do you I need to play with the "delay"?

[MotionPath Symmetrical possible?]

all good @Cassie I solved the positioning issue, thanks ☺️

[MotionPath Symmetrical possible?]

4 minutes ago, Cassie said:

Hey @awazigh,

 

Do you still need help? Looks like your updated pen is headed in the right direction.

indeed almost there, stil struggling with the positioning to get the cards stacked correctly 🤯

[MotionPath Symmetrical possible?]

me again! I've updated my pen with 2 different paths "left" & "right", however I've tried multiple configurations to play with the "zIndex" to make sure the cards are stacked correctly, but can't fix it...

anyone experienced same kind of situation?

[MotionPath Symmetrical possible?]

hey @Cassie thanks for that, I added the scale and opacity back but totally lost the effect of spinning from back to front, I probably missed something in your version.

Any available similar example you could have in mind using motionpath or as you suggested only transforms?

[MotionPath Symmetrical possible?]

thanks @Cassie for taking time to review it ☺️  I'm actually trying to create a rotation from back to front (kind of depth), in your example it's rather from left to right, not sure if it's clear 🥴

[MotionPath Symmetrical possible?]

My initial was to use motionpath on purpose to easily create the SVG ellipse without having to set x & y values for each card.

Did I miss something here?

(indeed blur is pretty heavy consuming, I'll drop it out, thx)

[MotionPath Symmetrical possible?]

the idea is to follow the ellipse path to create a field of depth effect, you think it's not the right direction with motionpath?

[MotionPath Symmetrical possible?]

Hi Everyone,

I'm trying to create a 2 symmetrical animations using MotionPath but can't achieve the expected result. I used alignOrigin and offSet to adjust a bit but I'm pretty it's the not the right way to do it.

Any direction using MotionPath for such case is greatly appreciated.

 

Thanks

Awa

See the Pen zYZPPZx by awazigh (@awazigh) on CodePen

[Splittext + Gradient Text, is it possible?]

You guys rock!! many thanks

[Splittext + Gradient Text, is it possible?]

@mvaneijgen Many thanks for these great explanations 🙏🏼

[Splittext + Gradient Text, is it possible?]

Hello Everyone, 

I'm trying to animate a title using Splittext but it seems that "background-clip" is not supported.

Any workaround?

 

Thanks for your help.

See the Pen oNBRKeM by awazigh (@awazigh) on CodePen

[License Question]

Great, I'll wait for the fix then. BTW if there is any chance to get a coupon 🤐  just saying 😇