Jump to content


  • Posts

  • Joined

  • Last visited

james182's Achievements



  1. 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.
  2. 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.
  3. james182

    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.
  4. 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.
  5. Yes, that makes sense. Thank you.
  6. 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.
  7. 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.
  8. 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 });
  9. Yes thats exactly what i was trying to get thanks
  10. @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?
  11. @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
  12. 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.
  13. 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);
  14. 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.
  15. Awesome thanks for the tips and help.