Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

8 Newbie

About thatkookooguy

  • Rank
  • Birthday 04/27/1987

Contact Methods

Profile Information

  • Gender
  • Location

Recent Profile Visitors

506 profile views
  1. 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
  2. @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.
  3. 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 */ , fals
  4. 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
  5. 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 h
  6. 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.
  7. 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.
  8. 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 PLA
  9. @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 d
  10. 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
  11. 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 posit