Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

james182

Members
  • Content Count

    18
  • Joined

  • Last visited

Community Reputation

3 Newbie

About james182

  • Rank
    Member
  1. 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.
  2. 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.
  3. Yes, that makes sense. Thank you.
  4. 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.
  5. 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.
  6. 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 }
  7. Yes thats exactly what i was trying to get thanks
  8. @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?
  9. @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
  10. 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.
  11. 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);
  12. 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.
  13. Awesome thanks for the tips and help.
  14. 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.
  15. Thanks, for the help. I think i have fixed it. I had to change the location of the svg and added extra css.
×