hellehs90

I have a marquee animation on a text that works fine on page load. But when you adjust the browser window, the dimensions are not correct. Is it possible to update the x-axis with the correct variable on window resize and not run the whole function over again?

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.

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?

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: http://codepen.io/winkerVSbecks/pen/EVJGVj As always, thanks!

Thank you so much again learning so much from you guys!

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

Hi everyone, I was wondering if anyone knows how to make a masking effect like this one with GSAP: http://www.concrete-beton.com Thanks!

Again, thank you so much! The xPercent was exactly what I needed!

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

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

Thanks!!

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>