Jump to content

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

Shaun Gorneau last won the day on March 3 2019

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by Shaun Gorneau

  1. Hi @Tejaxx7,


    Here is a Pen I put together demonstrating the seconds (ones/tens independently) to achieve the analog rolling effect. You could use the same techniques to bring the minutes and hours into play. If you need to present a specific time before tweening, you could get all time values individually and set the progress() of each respective timeline.


    See the Pen qGaxdV?editors=1111 by sgorneau (@sgorneau) on CodePen


    Edit: I left overflow visible in the pen so you can see what's going on. You can change that in the CSS to get your final effect.


    Happy tweening!

    • Like 2
  2. HI @JonQuayle,


    A couple problems ... in some places you are using what look likes jQuery syntax, but jQuery is nowhere to be found. With calling in jQuery and modifying a few things to make use of it ... you should be good.


    See the Pen bypvpa by sgorneau (@sgorneau) on CodePen


    Also, there was an extra parameter being passed in your .to calls ... I stripped that out.


    .to uses


    .to( target:Object, duration:Number, vars:Object, position:* ) : *


    You were passing .to( target, duration, vars, position, somethingElse)


    • Like 2
  3. 22 hours ago, PointC said:


    We can try, but sometimes the community just grabs the wheel at the last second and we're now careening off the topic of GSAP.





    LOL ... I'm usually the passenger in that car! ?‍♂️?

    • Haha 2
  4. 4 hours ago, Tejaxx7 said:
    Shaun why you said not to tween the clone??


    Because the requirement was that one stays behind, and the other moves to the destination box. I could just as well have Tweened the clone and stated "Don't tween the original". :)

  5. Hi @elegantseagulls,


    I'm rendering with some outlines to make it more obvious the "what" ... but I haven't figured out the "why". The "what" is that while the character bounding divs (.point) are the correct size, the characters within are being stuck to the left edge. I think the snap (upon calling mySplitTextH1.revert() )is them moving into a position that would be very close to centered within those divs.


    See the Pen eaNQzJ?editors=0110 by sgorneau (@sgorneau) on CodePen


    But, all of my positioning techniques for those characters is proving useless at this moment. I'm sure I'm missing something obvious, however ? ... so a solution is on the way!

    • Like 3
  6. 2 hours ago, PointC said:

    Just some other notes in addition to the things Shaun mentioned:


    1. You have a typo 

    // switch this
    funtion runAnimation() 
    // to this
    function runAnimation()


    2. It looks like you have two durations in your constructor

    var tween = TweenLite.from(myCircle, 5, 0.5, {left:"1200px"});
    // I assume you meant to do this
    var tween = TweenLite.from(myCircle, 5, {left:"1200px"});


    3. Left isn't a property of an SVG circle — you'll want to use x like @Shaun Gorneau did in his demo or the cx attribute.


    var tween = TweenLite.from(myCircle, 5, {x:1200});


    Happy tweening.




    Thanks Craig! I made a few changes and completely forgot to mention them (and why I made them) ... you da man ??

    • Like 2
  7. Legitimate concern ... I’m not too sure how Google handles divs and spans within heading tags.


    But, you could choose to execute/not execute certain scripts based on the reported user agent. User a server side script to put a class on <html> And then use the presence (or not) of that class as a hook in your script.

    • Like 3