en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en tr en en fr en en en en en en en fr ja en en en en en en en en nb en en en en en en en en en de en en nb en en en en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en en en hu en de en lt en nl en en en fr en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Well... this is an old topic, but I guess you can get a rain like effect using sprite animation. Just like old video games with a tile-able image. I couldn't find any available sprite online, but something like this: It depends on the styling of your animation if it could work, but it might be an easy hack for "a lot of particles" (or none at all actually) without a canvas
thatkookooguy replied to Johan ⚡️ Nerdmanship's topic in GSAP
@OSUblake That's exactly what I was talking about. When going back into focus, the first second usually has a drop in frames (just as when you load the page initially). That is why I set the minimum frame drop count as 2 - so I can skip the initial drop (sort of a false positive). I think I need to add something similar on page focus. maybe the strategy should be 2 consecutive seconds of frame drops to consider it as one. But I still need to test this out on devices with different specs to check average times and stuff.
scrollmagic + greensock starts immediately
thatkookooguy replied to thatkookooguy's topic in GSAP
Oh, now I understand your original question. Sorry, didn't know about the setPin option. Sounds like it's exactly what I'm looking for! thanks
scrollmagic + greensock starts immediately
thatkookooguy replied to thatkookooguy's topic in GSAP
Thanks for helping. I appreciate it a lot. I'm using the floating container since I want the animation to happen in the middle of the screen, I need the animation to float. Even if I use the inline animation placeholder as the actual animation container, I'll still have to make the hero, the monster , and the background position: float to keep it all in the middle of the screen and then set everything back inside the container to make the scroll continue when you scroll past the animation section. right now, the first time you scroll through the codepen, the animation happens as intended. I'm looking for the scene to take control over the screen, and go back to the site when the animation finishes. This is what I thought about implementing the achieve this. If you have better ideas, I'm all ears But I think it's almost where I want it, animation wise. I also tried changing the set to fromTo with a duration of 0. Thought it might be a problem with greensock not knowing to what state it needs to return to. But even after changing it, it acted the same way it acts right now.
scrollmagic + greensock starts immediately
thatkookooguy replied to thatkookooguy's topic in GSAP
Yeah, you understood me correctly that seemed to fix it for the first time the animation happens. If I scroll back up, the .hero-fight-parallax.fixed element doesn't go back to display: none; (and the green part above the animation isn't visible anymore) I also tried changing the display to opacity but that didn't work either. The fixed item should disappear once the animation reverses back beyond the scrollmagic's scene trigger point. I changed my original pen so you can check that out.
scrollmagic + greensock starts immediately
thatkookooguy replied to thatkookooguy's topic in GSAP
Sure, @Jonathan On the start of the animation I set the floating animation container to display block That set should happen when your reach the trigger with scroll magic and not when the page is rendered. On the top of the page there should be a little green section. It's the opposite of the finish animation were the floating animation display is set to none.
scrollmagic + greensock starts immediately
thatkookooguy posted a topic in GSAP
Hi forum! How are you today? I'm working on an animation that I want to trigger and sync to the scrollbar, but start in the middle of the page, and return the scrolling the page when finished. This is what I thought about doing: [content] [ANIMATION PLACEHOLDER which is height: 100vh;] [empty section] [ANIMATION which is floating and set to display: none; and height: 100vh;] I put a scroll scene trigger at the start of the ANIMATION PLACEHOLDER section. the animation duration is set by javascript. the duration will change the ANIMATION PLACEHOLDER height to get the correct duration injected into that scroll section: pre-animation: set height of ANIMATION PLACEHOLDER to animation duration (should be 2 screens or 200vh) animation: make ANIMATION appear (I don't want the animation to scroll off screen) make ANIMATION PLACEHOLDER stick to top of it's section (when animation is set to reverse, this will make the placeholder appear in the correct place) move two boxes in the ANIMATION synced to the scroll (for now) make ANIMATION PLACEHOLDER stick to bottom (so it will appear as if you just continued to scroll) make ANIMATION disappear This seems to work for the end of the animation, but the animation (at least the set) starts as soon as the page loads. maybe it has something to do with immediateRender? I want the floating ANIMATION to appear only when the scroll trigger reaches the top of the screen. The animation itself does trigger at the right moment (only when the trigger reaches the top), but the set part happens immediately thanks for the help Neil
Make character look the other way on reverse
thatkookooguy replied to thatkookooguy's topic in GSAP
@Jonathan oh cool! I used to with a duration of 0 because I thought set always happens at the start. good to know you can do that in a middle of an animation I tested this out and it seems to work as intended everywhere besides Safari (on mobile and probably on OS X as well). The character runs to the end of the path immediately on load even though you can only see the first mark on the viewport. Not sure if it's a problem with Greensock or ScrollMagic (or maybe something in my code). I'll investigate that more, but if someone has any leads (since I don't have an iPhone or a mac :-)), it would be greatly appreciated
Make character look the other way on reverse
thatkookooguy replied to thatkookooguy's topic in GSAP
Hi @Jonathan! thanks for the quick reply I wasn't able to see your codepen work (for some reason I don't see the changes), BUT you did gave me a good idea to separate the background-position-x and background-position-y. That worked perfectly for reversing the sprite. Also, I ended up calculating the direction based on getting the current time in seconds (anim.duration() * anim.progress()) and checking it against the destination. I used the same technique to speed the animation up if the destination is far away (more than 1 point away) I think it looks pretty good! If anybody has any more ideas on how to make this better, I'll appreciate the feedback thanks!
Make character look the other way on reverse
thatkookooguy posted a topic in GSAP
Hi everybody, I'll start by saying that Greensock is amazing and I love it Also, great forum! Already found a few solutions by going through some of the threads here. I'm trying to make a character walk on a path when the page scroll reach certain points. After a few tries, I went forward with the following solution: 1. animate the character on each path using top left with percentage so that the horizontal roads can be responsive 2. this way, I can create the entire animation from the start, and just forward the animation to the correct position (or even backwards) 3. potentially, I can make the animation slower of faster to make the character walk faster (this will effect both the sprite animation and the walking) Now, I'm at a point were the basics work. the character follows your scroll (it feels as if he's trying to catch up with you). Later, I'll add more points across the path to make him walk shorter distances Now, i'm having problems with 3 more things I want to accomplish: 1. make him go faster for bigger distances (if you scroll super fast, he should speed up the animation up to a certain max) 2. try and make the tweenTo function start at the same speed as the current speed (but still speed up and slow down overhaul if that's possible) 3. change the direction of the sprite. currently, on reverse(), the character just walks backwards. I want a way to change the sprite's background position to a "up walk" and "left walk" to make it better. Can this be done only by creating two different animations? I would really appreciate any help trying to fix those problems. I'm kind of stuck at this point, reading all the docs I can find
“This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. Only with the help of GSAP and this forum was I able to accomplish my project.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
“GSAP IS the animation library and has been for years. If you're gonna learn one - this is it.”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“GSAP, the rolls-royce of JS animation frameworks. Still going strong!”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“It's crazy awesome. The whole GSAP platform is, far and away, the best out there for dealing with animation of any sort.”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“I really need to commit to using GSAP more in my daily work & demos. I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. Keep up the great work!”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.