Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Surge

  1. hmmm ok now i think of it i can remove the iframes src attribute and re add it. this should have the same effect as completely removing the element from the dom.... Hopefully.


    i just need it to reload the iframe you see.

  2. ok thanks.

    i didn't know it works like that.


    i was thinking that the timeline would see the new dom element because the iframe has the same class name as it did have the first time it was added to the dom (before the removal onRepeat).


    so how would i tell the timeline to track the new element? i was hoping that using the exact same class would be enough. :)

  3. Here is a code pen: 

    See the Pen jqpNmX by chrissowerby (@chrissowerby) on CodePen

    The first time the timeline runs you will see the iframe get moved up. There is a .to() animation that moves the iframe up by animating its y value.


    After the timeline repeats this no longer happens. 

    The iframe does get loaded in and i can see it in the dom but its as if the timeline skips over the .to() animation properties.

    I have also added a onComplete function to the .to() animation with a console.log within the callback function.


    I can see that the callback function does get called but the animations y properties do not get changed.

  4. I have had an issue recently where the timeline skips over some of the .to() animations. This only when it repeats itself. The first time the timeline runs it does the full timeline in order correctly.


    I want to see if i can get a more simple code pen put together to show this.

  5. Sorry I was thinking the data-svg-origin was the original d attribute before gsap started to morph the path.


    The reason i was attempting to reset the d attr back was because i noticed one of the paths was not being reset back to what it should be when the timeline repeated:


    on this code pen you can see that the green search bar button gets left behind when the timeline repeats:

    See the Pen KzzOBg by helpchrisplz (@helpchrisplz) on CodePen


    I don't fully understand why it gets left behind and the only thing i could thing of was resetting the d attribute.

    But since then i have found that setting this path to be hidden at the end of the timeline works better:

    function onRepeat() {                      
     TweenMax.set("#green_btn", { autoAlpha: 0.0 });





     And then you were removing that important data that GSAP was relying on, thus it doesn't surprise me that your matrix() values were getting NaN in some cases. Again, I'm curious about what you were attempting with that line of code. 


    The  "getting NaN" was a separate issue that was happening on a totally different code pen.

    I was not resetting the d attribute on this code pen. I guess i should have made another thread so the two couldn't get confused.


  6. Another thing to note (that might be normal but i have spend a day testing to figure out) is it seems yPercent and xPercent (or could be the transformOrigin: "0% 50% -50" i used in the tween options) doesn't like when you display:none the nodes its is set on.


    e.g: When loading the page with the svg animations on while using a mobile phone; i wanted the arrow animations to only show in landscape mode. This is because there is no room for it in portrait.


    So i used a display none on the svg elements using a media query: @media(max-width: 500px) {}

    When going back and forth between landscape and portrait the arrow tips when back to there positions before yPercent and xPercent (or could be transformOrigin) was set on them.


    Changing the display none to visibility:hidden fixed this problem. Seems simple but i spent a lot of time reordering code to finally figure this out.

    I hope this might help someone.



    See the Pen xVOWWZ by helpchrisplz (@helpchrisplz) on CodePen

  7. I have updated the pen as my cleaning caused another unrelated bug.

    See the Pen KzzOBg by helpchrisplz (@helpchrisplz) on CodePen


    I noticed that my manual fix to set the d attribute does fix it when it repeats but adds an error in console: Error: Invalid value for <path> attribute d="210.69998168945312 39.5"

    e.g when i do this: 

    var bad_el = $("#green_btn");
    function onRepeat() {
       //TweenMax.set( "#green_btn", { x:0,y:0,rotation:0,opacity:0,clearProps:"all" } )
      bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin");
    var sowerby_slide_show = new TimelineMax({
      //onUpdate: updateSlider,
      repeat: -1,
      onRepeat: onRepeat
  8. Hi.


    I have a similar problem that could be due to my code but thought it might help people out.


    Here is a codepen showing my first attempt at a complex set of morphs:

    See the Pen GoLaJo by helpchrisplz (@helpchrisplz) on CodePen



    I seem to have a bug in my code that causes one of the SVG elements to not be put back to how it was at the start of the timeline when repeating the timeline repeats. e.g repeat: -1


    so I had a look in the dom and noticed the svg elements d attribute was not being put back to its origin svg data.

    I then created a function that would reset it back manually:

    var bad_el = $("#green_btn");
    function onRepeat() {
       //TweenMax.set( "#green_btn", { x:0,y:0,rotation:0,opacity:0,clearProps:"all" } )
      bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin");
    var sowerby_slide_show = new TimelineMax({
      //onUpdate: updateSlider,
      repeat: -1,
      onRepeat: onRepeat

    if you comment out this line in the codepen: 

    bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin");

    You will see what i mean when the animation repeats. There is a green svg element left behind. 


    If any one can put me in the right direction so i can find out what it is about this one svg element (#green_btn in this case) that causes it to be the only one that doesn't go back to normal on timeline repeat. That would be helpful. :)


    By the way I just relaunched our company website using lots of GSAP and want to show it off:

    It uses the same animation as I am posting the code pen for in the top animated banner.

    The animations are also responsive :) Its been hard to get it out of the doors but I love what i have been able to achieve now i have found GSAP!




     Is there a way to simplify all of this in a responsive container to make everything scale ?


    as an exmple:  If you resize the width of the browser when viewing the following web page you will see that the image slider area scales: surgemarketingsolutions.co.uk


    Here is the code i put together to handle it:


    in the example code

    $(".slider_overflow")  was my outer content wrapper

    $(".slide_outer")  was my inner content wrapper (i know its named wrong! :)  )

    natural_width is the width on desktop - the maximum it can be

    natural_height is the height on desktop - the maximum it can be

    var contentResizeTimer;
    function scale_content_on_window_resize(outer, iner, natural_width, natural_height) {       
        Here we pass in an outer wrapper and an inner wrapper. 
        Our content sits inside the inner wrapper.
        We then calculate the scale from the original height and width of the outer wrapper.
        At desktop the scale will be 1.0 but as the browser width decreases the scale will gradualy get smaller.
        The calculated scale then gets set on the inner wrapper and the height of the scaled element then gets set on the outer wrapper.
        This is to remove the borders around the scaled inner element.
        var outer_width = outer.width();                        
        if (outer_width > natural_width) {
            outer_width = natural_width;
        var theScale = outer_width / natural_width;
        // Calculate the actual slides height after its scaled.
        var processed_height = theScale * natural_height;
        TweenMax.to(outer, 0.2, {
            height: processed_height,
            width: "inherit",
            maxWidth: "100%",
            ease: Power4.easeOut
        TweenMax.set(iner, {
            autoAlpha: 1.0,
            transition: "all 0.2s ease",
            transformOrigin: "top center",
            scale: theScale,
            marginLeft: "0px",
            marginTop: "0px"
    } // end function scale_content_on_window_resize
    $(window).resize(function() {
        contentResizeTimer = setTimeout(function() {
            scale_content_on_window_resize($(".slider_overflow"), $(".slide_outer"), 1140, 560);
        }, 100);
    scale_content_on_window_resize($(".slider_overflow"), $(".slide_outer"), 1140, 560);
  10. Hi all.


    What part of gsap would I use to leave behind a trail when moving an image around with bezier?


    What I am trying to do is animate an arrow. So the arrow head will move down the page and point at parts of the page and then as the user scrolls down I will trigger the next animation. This would continue moving the arrow down the page a bit like a snake. If you can imagine a snakes head moving up down and left to point at headings on the page and its body get left behind as a trail while the head moves on.

    I was thinking it would be a bit like this code pen but a green trail would be left behind:


    An suggestions? Thanks!

    See the Pen LuIJj by GreenSock (@GreenSock) on CodePen

  11. HI. 

    Thanks. I found this thread and it fixed my problem with my image slider.

    I was animating elements within a cycle2 slider that get triggered on slide change using the cycle2 api. 

    All the animations got stuck and stopped half way though when coming back to the tab after some time.




    using the above fixed the problem for me.

    I expect this is because cycle2 uses set timeout to trigger the slide change and this is what my gsap animations are being fired by. When i change tab the timeouts are being triggered but the gsap animations had not finished because they are being slowed down by the way browsers slow down requestAnimationFrame when the tab is not active.

    • Like 1