[Animate array of items based on index]

BTW, i found the solution. 

My mistake was that i was setting `hover` as a global variable. 

I had to set it as const hover = gsap.to... 

so: 

const hover = gsap.to(animateElements, {
		translateY: -15,
		autoAlpha: 1,
		paused: true,
		ease: "power2.inOut",
		stagger: 0.1,
	});

 

[Animate array of items based on index]

Anyone that can help me, please?

[Animate array of items based on index]

Hi there,

I edited the codepen therefore also the question. 

Its strange that now the animation happens only on the last item of the array and not on the array im hovering over.  

Any help, please?

 

See the Pen zYWwXvL by Separator (@Separator) on CodePen

[DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules]

Thank you, this is better indeed!

[DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules]

Hi there,

Im trying to animate a pseudo element in my React (Nextjs) app but i get an error using CSSRulePlugin.

 

I import the plugin like this: 

import { CSSRulePlugin } from "gsap/dist/CSSRulePlugin";

and then trying to use it like this:

 

gsap.registerPlugin(CSSRulePlugin);
    let checkboxRipple = CSSRulePlugin.getRule(
      `.checkbox-wrapper #${[id]}:after`
    );
    gsap.to(checkboxRipple, {
      cssRule: {
        scale: 1.75,
        opacity: 0,
      },
      duration: 2,
    });
 

but i get the error you see in the attached screenshot.

Any help?

[Interpolate randomly using gsap utils]

Yes this works fine. 

I was overthinking and i complicated it, lol.

Thanks a lot!

[Interpolate randomly using gsap utils]

15 minutes ago, PointC said:

What are you trying to randomize? Duration, delay, repeatDelay, level of opacity, repeat count? I'm just not sure what the desired outcome is here.

 

Any more info would be helpful. Thanks.

 

Hi PointC,

Im trying to make them pulsate like they are now but in a random order. 

Probably the opacity.

[Interpolate randomly using gsap utils]

Hi there,

I want to apply effects randomly to the elements and i want these shapes to randomly fade in and out as you see in the pen.

I tried this using gsap interpolate util as shown in the pen but it interpolates through the classes at the same time. 

How do i make it interpolate randomly?

Maybe there is another way to achieve this?

See the Pen LYQvVZE by Separator (@Separator) on CodePen

[Trigger the animation on each click on React]

Lol, sorry for not thinking

[Trigger the animation on each click on React]

Thank you Cassie  

Much appreciated!

However, how do i animate back (reverse) when i click the back button?

[Trigger the animation on each click on React]

Hi there,

I'm building a multistep contact form and each time i click the next button i want the flower to rotate  for 45 degrees but now it only rotates once on the first click and not on the other clicks.

And also i want it to rotate back when i click the back button.

Attached is a simplified codepen and i hope there is enough code to explain the situation.

See the Pen PoQVZNG by Separator (@Separator) on CodePen

[SplitText with MotionPath not splitting words]

Why splitText is ignoring white space between words?

i tried reduceWhiteSpace: false, but it didn't work.

See the Pen MWQGEzR by Separator (@Separator) on CodePen

[SplitText and MotionPath displays text in reverse]

Oh, that was easy!

However i noticed another issue. 

Its not separating the words!

I edited the codepen.

[SplitText and MotionPath displays text in reverse]

Hi there,

Im using MotionPath plugin to animate a text through a path and SplitText to split the text into characters but as you see it displays the text in reverse. For example when i write "Gsap" i see "pasG". 

I think the title and the codepen is self explanatory. 

How can i fix this issue?

See the Pen MWQGEzR by Separator (@Separator) on CodePen

[Multiple morphSvg animations at the same time]

Thaaanks a lot!

Your support is amazing as i see in other topics here. Never seen a support like this!

Keep it up!

[Multiple morphSvg animations at the same time]

Hi there,

I'm having trouble making both these shapes (the blue one and the red one) happen at the same time. 

I also want to set the text in the middle hidden initially and only the mask will make it visible.

What im doing wrong here? I think it might be a silly mistake which i cant find out.

Thanks!

See the Pen qBpOXLa by Separator (@Separator) on CodePen