artyor

Hi all, I want to move .box by 100px for each repeat, but the tween always restarts. There is commented version which I adapted from other codepen Zach helped me with, but I don't think that's the right way of doing it

If you removed it, I wouldn't be so happy that I figured it on my own haha (still only learning js). I think your codepen works like charm, just tested it. Thank you, I will let you know otherwise.

Yes like that! I think, I will test it right away. But I don't need count and onRepeat anymore, that you left in pen?

Hi Zach, Well, not exactly that, I don't want init(); to run after 2 full repeats, but after 3rd ".to" of timeline running 1st time, So basically, if page has loaded & if my timeline is finished 3 ".to" out of 4 (on first run)... I'm not sure if that's clear enough? Maybe Im using wrong words, but you're codepen is still very useful to learn how onRepeat can be used.

Hi guys, I have basic codepen where I have "loader" animation, which i want to animate out with code, once my page is loaded. So I used window.addEventListener('load', (){ init(); }) In case my page loads before my loader animation finished atleast 3 steps, I still want them to play out before init() runs... I tried using onComplete on 3rd .to of my loader timeline and adding fnc() (which was wrapper for window.addEventListener), but it didn't work...I assume it's because that's not have event listeners work... is there any way I can archive this?

Thank you for another example! I was referencing video from this thread

Hi Zach, thank you for responding. When I did search on forum I found immediateRender, but video tutorial said it's used only in from or fromTo, so I didn't even try to use it. Thanks, this will sort my problem! I will also take a look into onComplete option as it seems the best practice scenario, but also a bit more advance. Thank you again.

Hi all, In this codepen I first use gsap.set to set .line element outside of .box (with yPercent), then I tween it with .to, and after that I use scroll trigger. In all 3 cases I manipulate yPercent. But scrollTrigger doesn't keep going from gsap.to, it resets itself to gsap.set and then it animates. I want scrollTrigger to animate .line starting from position that's been set with gsap.to. How can I acomplish this? (Not sure if it's worth to note that in my non-codepen example I use load event listener to to tween after page is loaded)

Hello, I went through greensock forum to find solution for smooth scrolling, and it was mostly Blake's codepen solution which pretty much worked as I want, however I was wondering would they work with scrollmagic? What exactly I mean is, I want to trigger gsap animations on element when they scroll into view, and for this I use scrollmagic. I was wondering if there will be problem with this since I read somewhere that this is just transform (which I saw with inspect element), and since it's not "real scroll" scrollmagic wont read it and trigger it when it should? This are Blake's codepens with smooth scrolling: https://codepen.io/osublake/pen/QqPqbN https://codepen.io/osublake/pen/ee9e27534440ef6ee1c2e2fdfd6c7e68 Thanks in advance

@PointC Hey mate, that's exactly what I needed! I will only replace tlbox.pause with .reverse. I have been playing with on enter and on leave but couldn't figure it out alone. Thank you again

@PointC Thanks for your time! And sorry for bothering too much about something that is not gsap directly. Really couldnt find anything on net.

@PointC Hello, thanks for answering. I do want to animate same properties when I enter the view port, either from scroll up or scroll down, that's the problem. But I dont care how will they be animated out when exiting the viewport as I wont see it or will only see small part of it. I also dont need them to be necessary animated when exiting the viewport, but just them to reset to orginal position so animation works when scrolling up. I wish the orginal animation when scrolling down also plays when scrolling up. This can get alot tricky when animating a lot of properties, codepen was just fast example I made.

Hello guys, 1st of, I want to say that I did alot of research on this one, and the solutions I found weren't the best, so I was hoping somebody could help me here. I'm also aware that ScrollMagic is not made by Greensock, and that people try to keep forum focused on GSAP, but I had no better place to ask, since scrollmagic issue page is very inactive. I hope you wont mind my question. I use GSAP(TimelineLite) and ScrollMagic to animate element once it gets triggered by ScrollMagic's TriggerElement. And that works fine, if I keep scrolling, element will stay in animated state, unless I scroll up again, way about trigger element, and then the animation will reverse (usually not visible because of tiggerElement position). And then it plays again once i scroll down to triggerElement, this also works fine, just as I wanted. But another thing that I want, is also, when I scroll down past the animated element, I want it to do reverse animation (or just fades out, doesnt matter as it wont be visible since we scrolled out of viewport). And then i want animation to run again once I scroll up. TL;DR: I want animation to play on both, scroll down and scroll up ways, once it is in triggerElement. The solutions I have found: The solutions I found were the make 2 scenes one for animate in and other to overwrite it, however, Jan Paepke said this can be glitchy and not working properly depending how fast user scrolls, and here is his look at this problem: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another (My CodePen doesn't have this solution included) Now, this solution is from 2014, and I dont think it's very clean one, so I was hoping that someone can help me find better solution. PS Im also aware that Blake has solution without ScrollMagic, but Im JS noob so I would rather not. Thanks in advance for your time