[register plugin Custom Wiggle]

Trying to use the CustomWiggle plugin with gsap but it keeps asking to:

"Please gsap.registerPlugin(CustomEase, CustomWiggle)"

I have added the gsap.registerPlugin('CustomWiggle'); at the beginning of my code, but no luck.

My code is below:

CustomWiggle.create("iconWiggle", { wiggles: 6, type: "easeInOut"});
gsap.to(btnIcon, { duration: 0.5, rotation: 30, ease: "iconWiggle" } );

The aim is on hovering over the button the icon wiggles.

See the Pen abmYRxV by james182 (@james182) on CodePen

[GSAP Custom Checkbox Issue]

I have the animation working on one checkbox but whene i add another both play. This should be simple to resolve but i can't figure it out.

I am trying to have it so the document is looked over for the checkboxes on the page an invoke the animation on individual checkboxes.

See the Pen oNzeJKO by james182 (@james182) on CodePen

[SVG Morphing]

Hi

I am new to the svg morph plugin. 

I am trying to get my path to animate from one point to another. I would like to get each of the point to reposition one after another as in the attached sequence.

But not sure exactly how.

See the Pen PozZJEY by james182 (@james182) on CodePen

[Stagger class replacement]

Hi GSAP Gurus,

I am having an issue where I am trying to replace classes and it's not working.

	$(element).addClass("red").removeClass("grey"); //Works
	
	//Not working
  	gsap.to(element, {
    	duration: 2,
    	className: "+=red",
    	stagger: 0.5
  	});

I have provided a CodePen Demo also.

See the Pen oNXrJEN by james182 (@james182) on CodePen

[3 Box Hover issues]

Yes, that makes sense. Thank you.

[ScrollMagic + GSAP Horizontal]

Hi

I am trying to get the horizontal scrolling to working with GSAP and ScrollMagic, but can't seem to get it to work, clearly I'm doing something wrong could i get some advice on why it's broken.

See the Pen mdJJbJX by james182 (@james182) on CodePen

[3 Box Hover issues]

Hi

I have three card elements with hover animations and they are not working as expected, they have glitches. When hovering over a card element the animations works but when you mouse out or mouse over again it freaks out and all three elements play.

Could i please get some assistance.

See the Pen rNagqZb by james182 (@james182) on CodePen

[Holding on frame for X sec]

Hi 

I am creating a digital display and am having issues understanding how to have the text pause for 2-3 sec then move on.

As this is a Google Web Designer project I have pasted my code:

 

var pf_logo = document.getElementById('pf_logo'),
      txt_1 = document.getElementById('txt_1'),
      txt_2 = document.getElementById('txt_2'),
      txt_3 = document.getElementById('txt_3'),
      bg_solid = document.getElementById('bg_solid'),
      tl = gsap.timeline({
        paused: true,
        repeat: 2,
        repeatDelay: 5
      });

    tl.set(pf_logo, { y: 67, opacity: 0 })
      .set(bg_solid, { y: -180, opacity: 0 })
      .set(txt_1, { x: -250, opacity: 0 })
      .set(txt_2, { x: -250, opacity: 0 })
      .set(txt_3, { x: -250, opacity: 0 })
      // Animate items
      .to(pf_logo, { duration: 0.7, opacity: 1, y: 0 })
      .to(bg_solid, { duration: 0.7, opacity: 1, y: 0 })

      .to(txt_1, { duration: 1, x: 25, opacity: 1, ease: Power1.easeOut, delay: 3 })
      .to(txt_1, { duration: 0.5, opacity: 0 })
      
      .to(txt_2, { duration: 1, x: 25, opacity: 1, ease: Power1.easeOut })
      .to(txt_2, { duration: 0.5, opacity: 0 })
    
      .to(txt_3, { duration: 1, x: 25, opacity: 1, ease: Power1.easeOut })
      .to(txt_3, { duration: 0.5, opacity: 0 });

 

[Hide / Show sections issues]

Yes thats exactly what i was trying to get

thanks

[Hide / Show sections issues]

@OSUblake Ok thanks for the tips.

 

I have updated the codepen example, i have the old section fading out and sliding and the new section needs to come in the elastic bounce this is what i am trying to achieve. Would I need to put the ease out side the {} on the fromTo() action?

 

[Hide / Show sections issues]

@OSUblake Could you give me an example of using the the timeline set based on my code?

Also my code has the opacity between 0 and 1, not sure i understand where your getting that from.

 

I am trying to have one section fade out and hide and the other appear. 

 

Sorry this is all new to me and I am still learning. 

Thanks

[Hide / Show sections issues]

I am trying to transition between 2 <section> elements which is not working correctly.

All my other code works great, it's just this gsap part giving me grief.

 

I am passing the fromSection and toSection into a function see below, I am wanting the fromSection to fade away and hide the element, then show the toSection with elastic ease. The issue seems to be with the hide() not being applied on each onComplete and the new section with display:none still active.

Any help would be appreciated.

See the Pen eYmmEZG by james182 (@james182) on CodePen

[Logo Animation for preloader]

I am new to GSAP and I am trying to stagger each of the "banners" within the SVG to appear in a certain order and loop in fading in /out.

eg. [banner-1, banner-2, banner-3, banner-4] the order should be [4,2,1,3] and repeat.

 

TweenMax.staggerFromTo(" #banner-1, #banner-2, #banner-3, #banner-4", 0.65, {opacity:0, ease:Back.easeOut},{opacity:1, repeat:2, yoyo:false}, 0.5);

See the Pen MWYWPPg by james182 (@james182) on CodePen

[Dynamic List Issues]

I have advanced my first version to be now being dynamic, but while I have gotten the list to work the colours aren't being applied and the dot isn't expanding.

See the Pen LYYgRoZ by james182 (@james182) on CodePen

[List Active State Issues]

Awesome thanks for the tips and help.

[List Active State Issues]

I am having issues in getting this to work properly, as I am new to GreenSock and JS in general.

The active state should have the "dot" expand in width (which it does) but it's not going back when the next one is clicked.

See the Pen NWWLOZP by james182 (@james182) on CodePen

[Vertical Sliding Menu]

Thanks, for the help.

I think i have fixed it. I had to change the location of the svg and added extra css.

[Vertical Sliding Menu]

Thanks, I have added the changes.

But I am still having issues, the layer order should be the Red BG then #activeBox, then the li text.

Should the menu be more greenSock coded rather than jQuery?

See the Pen xvoBrx by keyframers (@keyframers) on CodePen

 (Except vertical)

In the example link the yellow box moves behind the text.

[Vertical Sliding Menu]

Thanks for the welcome and pointers.

I have updated my CodePen example (above) to have the active state working (sort of) but what I am after is my #activeBox SVG to move behind the text with an elastic style.

[Vertical Sliding Menu]

Hello

This is my first post here as I am very new to GSAP and JS and would like to seek the wisdom of the GSAP Gods.

 

I am trying to have a vertical menu where the active state is a SVG rectangle which slides up or down behind the text based on which ever list item is "active".

 

I would like to use greensock to animate this, as the rectangle will need to bend in the direction of travel with elastic ease.

 

Could I please get some assistance on the best way to build this. 

See the Pen abbGJZB by james182 (@james182) on CodePen