Jump to content

elegantseagulls last won the day on October 20 2018

elegantseagulls had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by elegantseagulls

  1. Hey GSAP friends!

    I'm tweening a SVG circle's radius value and need it to sorta vibrate as it expands and contrasts. I'm just wondering, from a performance standpoint, what should give me best performance:


    var tl = new TimelineMax({repeat: -1, ease:Power0.easeNone})
      .to(svg, 2, {attr:{r:150}, ease: CustomEase.create("custom", "M0,0,C0,0,0.051,0.218,0.06,0.256,0.073,0.245,0.138,0.197,0.155,0.185,0.166,0.209,0.213,0.311,0.22,0.324,0.222,0.316,0.291,0.284,0.294,0.276,0.299,0.29,0.362,0.23,0.386,0.284,0.466,0.375,0.446,0.529,0.474,0.56,0.479,0.538,0.574,0.486,0.58,0.462,0.622,0.505,0.803,0.689,0.905,0.792,0.911,0.871,0.923,1.026,0.925,1.045,0.929,1.038,0.973,0.959,0.98,0.948,0.982,0.954,1,1,1,1")})
      .to(svg, 2, {attr:{r:100}, ease: CustomEase.create("custom", "M0,0,C0,0,0.051,0.218,0.06,0.256,0.073,0.245,0.138,0.197,0.155,0.185,0.166,0.209,0.213,0.311,0.22,0.324,0.222,0.316,0.291,0.284,0.294,0.276,0.299,0.29,0.362,0.23,0.386,0.284,0.466,0.375,0.446,0.529,0.474,0.56,0.479,0.538,0.574,0.486,0.58,0.462,0.622,0.505,0.803,0.689,0.905,0.792,0.911,0.871,0.923,1.026,0.925,1.045,0.929,1.038,0.973,0.959,0.98,0.948,0.982,0.954,1,1,1,1")})
      .to(svg, 4, {bezier:{curviness:1.25, values:[{
        {attr:{r:90}}, {attr:{r:40}},{attr:{r:50}},{attr:{r:80}},{attr:{r:150}},/*...etc...*/{attr:{r:95}},{attr:{r:100}} 
      ]}} })
    //or C:
      .to(svg, .1, {attr:{r:90}})
      .to(svg, .1, {attr:{r:40}})
      .to(svg, .1, {attr:{r:150}})
      .to(svg, .1, {attr:{r:100}})

    I know the level of control/readability will be different with each, but just wondering from a performance standpoint what will be best, or if it'd be minimal? Also, how would one go about testing this? There will be more going on in the timeline (several circles being animated in a similar way).

  2. I'm at a loss. I cannot replicate this issue in a CodePen so sorry in advance. Here's what I have:


    var aiAnimations = (function () {
      function init() {
        TweenMax.set('.ai-hero__flare', { opacity: 1, transformOrigin:'50% 50%'})
        TweenMax.from('.ai-hero__flare', .7, { scale: 0, ease: Power3.easeOut })
      return {
        init: init,
    $(document).ready(function () {


    The output is:

    element {
        transform-origin: 0px center 0px;
        opacity: 1;
        transform: matrix(1, 0, 0, 1, 0, 0);


    I cannot figure out what is going wrong with transformOrigin. I'm loading GSAP v: 2.0.2 via NPM and am compiling via Gulp.


    If I remove the line with transformOrigin nothing shows up for transform-origin inline, so it's not being overwritten elsewhere.


    Any ideas?


    I can set the transform-origin in my CSS, but I'd rather control it via GSAP.




  3. Hi Friends,


    I'm trying to scrub to different labels in my timeline using `tweenTo` and I want the time to tween there to be 1s no matter where in the timeline I start from. Is there any way to set a time duration on a `.tweenTo`?

    See the Pen MBWqYX by elegantseagulls (@elegantseagulls) on CodePen

  4. Hi GSAP Friends, 




    Working on a DrawSVG animation and was having some huge performance issues on iOS mobile. It turns out that adding a size directly to the SVG element was causing the issue (adding a size to a div wrapper helped eliminate the issue). 


    Size on SVG pen (awful on iOS):


    Size on div wrapper pen (much better on iOS):

    See the Pen mErPEK by ryan_labar (@ryan_labar) on CodePen


    Any reason for this issue (am I doing something wrong)? Not needing to wrap an SVG in a div would really be idea.  Is it a GSAP bug, or the fault of the browser (or both)?




    **UPDATE** even with the div wrapper, performance isn't great on mobile, what should I do? From my understanding, resizing my SVG's viewbox/internals may help, but IDK if that will eliminate the problem, it's not exactly a huge svg file--size or otherwise 

    See the Pen wWqGZk by ryan_labar (@ryan_labar) on CodePen

  5. Hi All, 


    I'm trying to get an element to reverse its animation once it's clicked a second time. I'm using GSAP to add and remove classes (to it, and other elements), as a way to start the initiate the animation. I've not uses reverse before, but have looked at other examples and documentation and can't see what I'm doing wrong. It seems like I'm overlooking something pretty simple.


    See the Pen QyyzVX by ryan_labar (@ryan_labar) on CodePen


    Any thoughts?

    See the Pen by QyyzVX (@QyyzVX) on CodePen

  6. Thank you so much for the detailed response, @Jonathan! It's answers like this that makes me love GSAP! 


    Thanks for the info on the CSSPlugin. I was hoping to leverage the variables for colors in SCSS, but I might just have to hardcode those into the JS...


    Also, you'll be happy to know I wasn't planning on keeping the <br/> elements.  

    • Like 1
  7. Hi all, 


    I'm having an issue with transformOrigin combined with scale in Chrome (for OSX) (not the case in FF or Opera).


    Check a box, and click the CORRECT button. The 'check' jumps up the the viewBox in Chrome, but stays nicely centered in FF and Opera.


    This Pen has been fixed to show solution.


    See the Pen qbWzgK by ryan_labar (@ryan_labar) on CodePen

    See the Pen vNozXO by ryan_labar (@ryan_labar) on CodePen

  8. Hi All, 


    I'm working on a custom radio checkbox using drawSVG and am having a bit of trouble getting my animation to play more than once. I'm thinking that resetting the timeline once the animation is completed is how it should be done, but I'm not able to quite figure that out. 


    Please see the Codepen ( details. 





    See the Pen vNozXO by ryan_labar (@ryan_labar) on CodePen