james182

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.

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.

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.

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.

Yes, that makes sense. Thank you.

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.

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.

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 });

Yes thats exactly what i was trying to get thanks

@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?

@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

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.

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);

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.

Awesome thanks for the tips and help.

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.

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

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? Sample Menu (Except vertical) In the example link the yellow box moves behind the text.

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.

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.