Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by BeckBeach

  1. Hi! I am trying to figure out how a warping animated background could be created using GSAP. This website here: https://titan.viita-watches.com/en/ has a marble background image that is moving. I looked at the source and the background is a jpg. I'm not sure how it is moving. The site uses GSAP TweenMax and Scroll Magic after looking at the javascript here: https://titan.viita-watches.com/en/dist/build.js


    Does anyone have any ideas? I would like to achieve the same effect on my own website.

  2. You've got the code mostly right. You have all the tweens with a position parameter of 0 so they all start at the same time. Just remove that and they'll play in sequence.


    The pen is also still using the outdated version of GSAP. Please click the little gear icon on the JS panel and delete TweenMax 1.16. Then use the Quick-add drop-down to add version 1.19.1. 


    Happy tweening.


    Ok I did. Thanks. I hope my boss likes this. He may want them randomized too. *yanks hair out* :o

  3. If I understand your question correctly... yes - multiple 'blips' each following their own unique path would require each to have a unique name. If you're making one of these for each of your paths on the map, you could use a loop to create a timeline for each one. That would save quite a bit of typing.


    Does that help?


    Happy tweening.


    Hi! I made 3 instances of blip ( #blip1, #blip2, #blip3) in the shapes group. edit: I got all 3 to work but they play together. I am trying to make them play one after another.


    See the Pen gmBwpd by beckbeach (@beckbeach) on CodePen

  4. You should be able to center it on the line like this:

    TweenMax.set("#blip", {transformOrigin:"center center", xPercent:-50, yPercent:-50})

    You should also change your pen to the latest version of GSAP (1.19.1). Right now you're using a two year old version (1.16). Please make sure you're using the latest plugins too. Here's a pen with all the Club plugins that you can use on CodePen.




    Happy tweening.


    Great! That looks good. 


    Another issue I have run into is that it won't let me animate another instance of #blip. Do I need to make a #blip2, #blip3, etc shape to animate this shape more than once?

    motionPath = MorphSVGPlugin.pathDataToBezier("#mp1", {align:"#blip"}),
    motionPath2 = MorphSVGPlugin.pathDataToBezier("#mp2", {align:"#blip"}),
    motionPath3 = MorphSVGPlugin.pathDataToBezier("#mp3", {align:"#blip"});
    function getBlip() {
       var tl_blip = new TimelineMax({repeat:-1});
          .to("#blip", 1, {bezier:{values:motionPath, type:"cubic", autoRotate:true}})
          .to("#blip", 3, {autoAlpha: 0},0)
          .to("#blip", 1, {bezier:{values:motionPath2, type:"cubic", autoRotate:true}})
          .to("#blip", 3, {autoAlpha: 0},0)
          .to("#blip", 1, {bezier:{values:motionPath3, type:"cubic", autoRotate:true}})
          .to("#blip", 3, {autoAlpha: 0},0);
       return tl_blip;
  5. If you're changing to a single dot moving along the line, I don't think you'd need to use DrawSVG and a mask. I'd recommend using the pathDataToBezier() method of the MorphSVG plugin. That makes it super easy to have an element follow a path. Here's some more info:




    Happy tweening.


    Hi thanks! I got the "#blip" shape to move along the path, however, I need to have it move along the center of the line.

    See the Pen gmBwpd by beckbeach (@beckbeach) on CodePen

  6. Yes it does. I think it looks really good but now my boss says he just wants one dot to draw across. I will try to do this using your airplane line example. It will just be a single dot moving across each site with no line showing up. I appreciate your help!

  7. Hi BeckBeach  :)


    Looks like you're trying to use DrawSVG to draw a dashed line. That won't work correctly as DrawSVG makes one big dash and animates the offset. Your best bet there is to use a mask. I did a little write-up and demo about that in our SVG Gotchas thread.




    Hopefully that helps.


    Happy tweening.


    Hi I am trying to do this but it keeps showing a dotted line that won't animate. I am just trying it on one line at the bottom. Can you let me know what I am doing wrong?

    See the Pen dvKYYJ by beckbeach (@beckbeach) on CodePen

    What I am going to do with this animation is have the lines draw and then fade in 50%. Then, randomly, a dotted line will draw one at a time very fast. This animation will be ongoing until the user leaves the page. It is for my job at Verizon. We recently bought the business club greensock and I am the only developer on the team.

  8. I am trying to animate a 2nd group of lines that will be dashed. They will animate one at a time continuously after the first animated timeline is completed. I'd like them to animate randomly if possible. The scene1 timeline seems to not play and I get errors. 

    Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.



    Here is my code:


    var mainTl = new TimelineMax({delay:0.5});

    function getLines() {
    var tl_lines = new TimelineMax();

    .staggerFrom(".st0", 2, {stroke:"white",strokeWidth:2,drawSVG:"0%"},0)
    .from(".cls-3", 1, {scale:0,transformOrigin: 'center center',ease:Bounce.easeOut},0)
    .to(".st0", 1, {autoAlpha:0});

    function getDash() {
    var tl_dash = new TimelineMax();

    .to("#line26", 1, {autoAlpha:1})
    .staggerFrom("#line26", 2, {stroke:"white",strokeWidth:2,drawSVG:"0%"},0);

    function init() {
    .add(getLines(), 'scene-intro')
    .add(getDash(), 'scene1');



    See the Pen dvKYYJ by beckbeach (@beckbeach) on CodePen

  9. Thank you so much, Petr! I am a big fan of yours after watching your videos. They have helped me so much to understand Greensock and learn more about JavaScript. I fixed my graph to follow your guidelines and it looks so much better. :D


    Hi Beck, 

    great to see you are implementing GreenSock into a real life project.




    After quickly looking at your code, I realised that you have misspelled transformOrigin for transformOrgin, that is why your transforms are not behaving the way you want.


    You will need to fix the typo and set the default value for the #top to be the bottom of the element, currently it is set to '0% 0%' which is the top of it.


    Also remember, once you change transform origin on an element, you don't have to declare it again on the future tweens, unless you want to change it. In your case you should set it to "100% 100%" in the clearTl function and that's it.


    See the Pen 4dae4dfd0fafc9fa970ef251a3105e27 by ihatetomatoes (@ihatetomatoes) on CodePen



    My suggestion is to tweak the timing of your animations, at the moment it feels like the whole graph is animating in for too long.


    In high level I would start by animating 3 groups of elements:

    1. the graph axis with labels
    2. the TIMES PAST and POWERTOOLS arrow
    3. the text

    This might be harder to explain, but one thing that helps me when creating the animation flow is to animate elements that my eyes are looking at, followed by elements near by.


    In your case when the TIMES PAST animates then the TEXT animates, which is quite far from the previous element that my attention was drawn to. 


    I really think that you only have to tweak to a few things to make this graph stand out even more.


    Hope that helps Beck and thanks again for signing up.




    • Like 1
  10. Hi! I am new to GreenSock animation so do not know very much. Can anyone recommend to me some other animations that might look good for my animated graph? So far, I incorporated the autoAlpha, scaling, animate.css. 


    I am trying to draw the top line from the circle but it keeps scaling from the top instead of the bottom. Even putting a transformOrgin of '0% 0%' will not help.


    Any tips would help. I learned GreenSock from the ihatetomatoes Greensock paid course. I keep referring to the videos as well.



    See the Pen xOqbwg by beckbeach (@beckbeach) on CodePen

    • Like 1