Jump to content
GreenSock

Separator

Members
  • Posts

    16
  • Joined

  • Last visited

Posts posted by Separator

  1. 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,
    	});

     

    • Like 1
  2. 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?

    Screenshot 2022-06-18 at 02.23.08.png

  3. 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.

  4. 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

  5. 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

×