thatkookooguy

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

@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.

I recently implemented something like this based on that codepen. I tried to lower the animation stress to try and improve the fps. when the fps drop below 30 twice, I kill some of the animation and scenes in order to try and get a better performance for the user. I tried to think of a way to do this before the animation actually starts, but wasn't able to find one. But gracefully degrading the animation seems like a good start Here is my take on it: FPS(30 /* minimum acceptable fps */ , 2 /* how many framedrops is too many */ , false /* true = trigger drops-limit more than once */ , true /* show fps info */ ) .on('drops-limit', function(numberOfDrops) { console.log('~= Animation degradation triggered =~'); /* stop animations and simplify things here. if you want to have several degradations in quality, turn alwaysTrigger to true and change the behaviour based on numberOfDrops */ // MY EXAMPLE: if (ANIMATIONS.complicatedAnimation) { ANIMATIONS.complicatedAnimation.seek(0).kill(); ANIMATIONS.complicatedAnimation2.seek(0).kill(); ANIMATIONS.complicatedAnimation3.seek(0).kill(); // destroy scrollMagic scene SCENES.fightScene.destroy(true); // go to end of animation before killing it ANIMATIONS.fight.seek('-=0').kill(); // just a fix for now, instead of adding a condition in the SCENES // functions ANIMATIONS.text1 = ANIMATIONS.text2 = ANIMATIONS.text3 = { play: function() {} }; } }); function FPS(framesThreshold, dropsThreshold, alwaysTrigger, showDebugBox) { var self = {}; self.framesThreshold = framesThreshold || 30; self.dropsThreshold = dropsThreshold || 2; self.firstDropsTrigger = true; toEmitter(self); if (showDebugBox) { $('body').append([ '<div class="hud">', 'FPS: <span id="framerate">0</span>; ', 'lowest FPS: <span id="lowest">null</span>; ', 'DROPS Below ', self.framesThreshold, 'FPS: <span id="drops">0</span>', '</div>' ].join('')); } var $framerate = showDebugBox ? document.querySelector("#framerate") : {}; var $lowest = showDebugBox ? document.querySelector("#lowest") : {}; var $drops = showDebugBox ? document.querySelector("#drops") : {}; var prevTime = 0; var frames = 0; var ticker = TweenLite.ticker; var lowestFrameRate = -1; var numberOfDrops = 0; ticker.addEventListener("tick", update); return self; function update() { var current = ticker.time; frames++; if (current > prevTime + 1) { var fps = Math.round(frames / (current - prevTime)); $framerate.textContent = fps; prevTime = current; frames = 0; if (lowestFrameRate === -1) { lowestFrameRate = fps; $lowest.textContent = lowestFrameRate; self.trigger('lowest-initialized', lowestFrameRate); } if (fps < lowestFrameRate) { lowestFrameRate = fps; console.info('lowest framerate: ' + lowestFrameRate); $lowest.textContent = lowestFrameRate; self.trigger('lowest-updated', lowestFrameRate); } if (fps < self.framesThreshold) { numberOfDrops++; $drops.textContent = numberOfDrops; self.trigger('drops-updated', lowestFrameRate); } if ((alwaysTrigger || self.firstDropsTrigger) && numberOfDrops >= self.dropsThreshold) { self.trigger('drops-limit', numberOfDrops); self.firstDropsTrigger = false; $drops.textContent = numberOfDrops; } } } } function toEmitter(obj) { obj.eventHash = {}; obj.trigger = function() { var eventName = arguments[0]; var args = Array.prototype.slice.call(arguments, 1); if (obj.eventHash[eventName]) obj.eventHash[eventName].forEach(function(handler) { handler.apply(this, args); }); } obj.on = function(eventName, handler) { (obj.eventHash[eventName]) ? obj.eventHash[eventName].push(handler): obj.eventHash[eventName] = [handler]; } } Here's the code added to a fork of an animation on codepen. On PC, I don't get anywhere near 30fps, but on mobile, if I release enough confetti, I can create lots of frame drops, and the event triggers. I still need to check this on tab change. there might be a problem there. I also implemented this on one of my animations (WIP. link might change): http://kibibit.io/achievibit-demo

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

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.

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.

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.

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 immediatley thanks for the help Neil

@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

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!

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