Jump to content
Search Community

hellehs90

Plus

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Posts posted by hellehs90

    ScrollTo plugin and anchors

    in GSAP

    Posted

    Hi guys,

    So I'm trying to use the scrollToPlugin to scroll to my anchor points. It's a list of items. The first time I click it works, but then it gives me errors that it's not a valid selector.

      

      $('.toc__list-item a').click(function(e){
    e.preventDefault();
    var href = $(this).attr("href");
    TweenLite.to(window, 1, {scrollTo:{y:href, offsetY:70}});
  });

     

    Also, is it possible to detect with the scrollToPlugin when you have scrolled past an element? For example when <a href="#linktoheading"> has scrolled past h2#linktoheading? Thanks. 

     

    ScrollTo more than one anchor

    in GSAP

    Posted

    Hi guys,

     

    I have several anchor points I want to scroll to, like this: 

    $('#goToAnchor1').on('click', function() {
  TweenMax.to(window, 1, {scrollTo:{y:'#anchor1', offsetY:140, ease: Power3.easeOut}});
});


$('#goToAnchor2').on('click', function() {
  TweenMax.to(window, 1, {scrollTo:{y:'#anchor2', offsetY:140, ease: Power3.easeOut}});
});

     

    Is it possible to do this with all the anchor links that looks like this? With a for-loop for example?

    Animating waves with GSAP

    in GSAP

    Posted

    I have some stroke (see attachment) that I want to animate so they're moving like waves. I have something similar with DrawSVG but that wont work when I always want the waves to be visible and not be drawn over and over again?

    I'm looking for something like this:

     

    As always, thanks!

    post-38614-0-57418100-1476803494_thumb.png

    See the Pen EVJGVj by winkerVSbecks (@winkerVSbecks) on CodePen

    Trying to loop Timelines

    in GSAP

    Posted

    Hi guys, I have these timelines that's very similar and I'm wondering if it's possible to loop through them or something to have a cleaner code? This is what I'm working with: 

        var rt_step1 = $('.contact_module2016 .step1'),
        rt_step2 = $('.contact_module2016 .step2'),
        rt_step3 = $('.contact_module2016 .step3'),
        rt_step4 = $('.contact_module2016 .step4'),
        rt_step5 = $('.contact_module2016 .step5'),
        step1Timeline = new TimelineMax(),
        step2Timeline = new TimelineMax(),
        step3Timeline = new TimelineMax(),
        step4Timeline = new TimelineMax(),
        numbers = ["step1Timeline", "step2Timeline", "step3Timeline", "step4Timeline"];

    step1Timeline.to(rt_step1, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                 .to(rt_step2, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
    step1Timeline.pause();  
    
    step2Timeline.to(rt_step2, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                 .to(rt_step3, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
    step2Timeline.pause();  
    
    step3Timeline.to(rt_step3, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                 .to(rt_step4, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
    step3Timeline.pause();   
    
    step4Timeline.to(rt_step4, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                 .to(rt_step5, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
    step4Timeline.pause();

    This is what I'm trying to do but I get the error that numbers is not a function. Anyone done this before? 
        for (i = 0; i < numbers.length; i++) {         
        numbers[i].to(rt_step1, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                  .to(rt_step2, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
        numbers[i].pause();       
    }
    Thanks so much for your attention and all the help :)

     

    Responsive Tweens

    in GSAP

    Posted

    Hi everyone! I was wondering if someone could help me with a scaling problem I'm having. 

     

    I have five sections inside a div and every section is the width of the window. The div is the width * 5. When pressing the next buttons inside a section the div translates X the width of the page to show the next section (see codepen URL). I have this function in a window.resize but I don't know how to change the position of the current section so that it always fits and centers the window width. 

     

    Any help would be much appreciated!

     

    - Helle

    See the Pen jrrYaG by helle_railway (@helle_railway) on CodePen

    Many tweens

    in GSAP

    Posted

    Hi! I have a lot of tweens I want to start and complete at the same time. Is there an easier way to do that than this code?:
     

            TweenMax.to('#charmander_path11', 2, {morphSVG:'#charmeleon_path8'});
            TweenMax.to('#charmander_path1', 2, {morphSVG:'#charmeleon_path1'});
            TweenMax.to('#charmander_path7', 2, {morphSVG:'#charmeleon_path7'});
            TweenMax.to('#charmander_path3', 2, {morphSVG:'#charmeleon_path4'});
            TweenMax.to('#charmander_path2', 2, {morphSVG:'#charmeleon_path2'});
            TweenMax.to('#charmander_path4', 2, {morphSVG:'#charmeleon_path3'});
            TweenMax.to('#charmander_path5', 2, {morphSVG:'#charmeleon_path6'});
            TweenMax.to('#charmander_path10', 2, {morphSVG:'#charmeleon_path9'});
            TweenMax.to('#charmander_path8', 2, {morphSVG:'#charmeleon_path13'});
            TweenMax.to('#charmander_path9', 2, {morphSVG:'#charmeleon_path10'});
            TweenMax.to('#charmander_path6', 2, {morphSVG:'#charmeleon_path11'});
            TweenMax.to('#charmander_path12', 2, {morphSVG:'#charmeleon_path5', fill:'#CBD4DD'});
            TweenMax.to('#charmander_path13', 2, {morphSVG:'#charmeleon_path12'});


    I know you can make a timeline, but then all the tweens will happen after each other. Also, how would i repeat all those tweens without copying myself? Thanks

    Animate SVG path

    in GSAP

    Posted

    Hi, I was wondering if anyone could help me out with a pretty complex path animation. I have a path looking like a radio wave and I need it to go through four stages where the last one just makes the path into a straight line (see attached image). Is this possible with GSAP ? 

    My SVG looks like this: 


    <svg id="secondwave" xmlns="http://www.w3.org/2000/svg" width="1440" height="165" x="0px" y="0px"
                 viewBox="0 0 1440 168" style="width:100%;height:auto;" xml:space="preserve">
            <path class="st0" d="M0,167C11.2,167,5.9,1,15.5,1S23,167,33.2,167S37.5,1,57.8,1s13.4,166,32.1,166S99.6,1,122.1,1
                s16.1,166,32.1,166S169.7,1,189,1s15,166,30,166c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166
                s11.8,166,30.5,166C369.4,167,361.9,1,371,1s7.5,166,16.6,166S394,1,403.1,1s3.7,166,17.1,166S425,1,436.8,1s12.3,166,17.1,166
                c4.8,0,4.3-166,16.1-166c11.8,0,4.8,166,17.1,166c12.3,0,5.4-166,15.5-166c10.2,0,1.1,166,17.7,166c16.6,0,12.8-166,28.4-166
                c15.5,0,19.8,166,33.7,166S599,1,616.1,1c17.1,0,7.5,166,29.4,166C661.1,167,661.1,0,682,1s18.7,166,34.8,166
                c16.1,0,13.9-166,32.7-166s13.4,166,31.6,166S784.8,1,801.9,1c17.1,0,5.9,166,18.2,166c12.3,0,5.9-166,15.5-166s-1.1,166,17.1,166
                S854.4,1,868.8,1c14.5,0,5.4,166,19.8,166c14.5,0,5.4-166,14.5-166c9.1,0,5.4,166,16.6,166S925.6,1,935.2,1s7.5,166,17.7,166
                c10.2,0,4.3-166,24.6-166c20.3,0,13.4,166,32.1,166s9.6-166,32.1-166c22.5,0,16.1,166,32.1,166s15.5-166,34.8-166s15,166,30,166
                c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166c20.3,0,11.8,166,30.5,166s11.2-166,20.3-166s7.5,166,16.6,166
                c9.1,0,6.4-166,15.5-166c9.1,0,3.7,166,17.1,166c13.4,0,4.8-166,16.6-166s12.3,166,17.1,166s4.3-166,16.1-166s4.8,166,17.1,166
                s5.4-166,15.5-166s1.1,166,17.7,166"/>
            </svg>

    post-38614-0-73762100-1462187482_thumb.jpg

×
×
  • Create New...