Jump to content

elegantseagulls last won the day on October 20 2018

elegantseagulls had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by elegantseagulls

  1. @kevmon I'm thinking you'll either need to take the approach I took with eases, or have the Sun be contained in the SVG. Another solution to provide more true-to-path accuracy would be to use the CustomEase plugin. This uses your SunPath to create the ease, and I'm using relative units to ensure it traverses the viewport: That said, I haven't had my morning coffee, so someone may have a better solution using your current setup.
  2. You can also get a similar path effect using two different SlowMo eases:
  3. Hey All Who Provided Assistance With This, Just wanted to share the final product: https://www.audible.com/about/ That's all! Oh, and thanks for the amazing support here!
  4. Have you tried breaking the animation down into simple parts to see where the issue is stemming from? You're getting a bunch of console warnings with the floating hearts. I'd try disabling that to see if the issue is with your drawSVG or your hearts. My hunch is that its due to animating `attr: { x: x, y: y },` instead of using a transform `x:x` (which can be passed to the GPU). If you turn chrome's paint flashing borders on there's a lot of random extra paints on these hearts..
  5. I see a few things that may help. It looks like you're setting a new current slide on the click event, so when you click rapidly, the animation is resetting to the new current slide. To help this, you may want to set the current slide index via `onComplete`. There's also a jump on your next slide animations; they are less noticeable just due to how the 'left' property works. To further eliminate these 'jumps' in both directions you'll want to set the fromTo values based on the slide's current (when arrow is clicked) position. Also, from a performance standpoint, consider use 'x' (transform) over 'left', this will allow for smoother animations. This article does a great job explaining the why: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 Hope this helps.
  6. @noineter If you're looking for resources on GSAP, there's a ton, and the docs are very detailed, too: https://greensock.com/docs https://greensock.com/learning https://ihatetomatoes.net/get-greensock-101/ https://frontendmasters.com/courses/svg-animation/ Or just spend a few hours on this forum. There's a wealth of knowledge and passion for helping here that I've not seen for any other web development tool.
  7. @Shaun Gorneau is correct. If you need more resources: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange On a side note: you've got some really nice effects happening on that site. Would love to see it when it's all done!
  8. Hi @Radizzt, The logo is positioned statically. You need to add position: relative, or position: absolute for the left property to work. That said, animating 'x' is more performant then animating 'left', as it uses transforms which can animate on sub-pixels and can be passed to gpu.
  9. You'll want to setup a timeline that's paused and will play, or reverse, on hover. I added a quick TL and hover function to your pen, you'll likely want to tweak to get the overall feel the way you like.
  10. Hi @MikeWillis, My suggestion would be to break the animation down into parts to find out what part of the code is causing it to be choppy. I wasn't able to easily read enough of what's happening in your code, to give a direct suggestion. I think you may be better of using a play() / reverse() on toggle the show hide too, for simplicity sake (see this nav toggle I built a while back https://codepen.io/ryan_labar/pen/Vezxxy?editors=1010).
  11. That's correct, they're bundled into one file. Check the docs to learn more on what's included in each: https://greensock.com/docs, and the getting started guide: https://greensock.com/get-started-js
  12. Hi @yomamen Adding CSS `margin-bottom:-100vh;` to your `.first` class seems to help. This pulls the section up to overlap the sections and create the x-fade effect.
  13. @miks I believe you're thinking about draggable (https://greensock.com/docs/Utilities/Draggable) and edge resistance (sample here: https://greensock.com/draggable) With that, you might be able to setup a watcher to see if current `.y` > `maxY` and load more based on that. Though that's not something baked into Draggable as far as I know.
  14. @wcomp - if you're already making 40 paths, you'd be better off building the sprite than morphing that many. You can do the sprite in SVG too, since you are using Inkscape already. If it were me, I'd use the viewBox to hide the off-screen sprites. Just remember, for smooth animations, you'll want to be close to 60 fps (down to 30 would be acceptable too). So you'd end up with an SVG looking like: <svg viewBox="0 0 100 100"> <g class="transformMe"> <path /> <path /> <path /> <!-- ...etc. Each, in this instance would be 100 units appart --> </g> </svg> and your GSAP looking like: TweenMax.to('.transformMe', .5, { x: -2900, // if you had 30 sprites (100 * (30 - 1)) ease: SteppedEase.config(29) // 29 steps cause first one is already in view })
  15. You might be able to segment the tail of your arrow up into several paths that each autoRotate on their own to achieve something similar. It'll probably take a lot of trial and error with some other properties to get where you'd need, though, and may be tough to get the curve as smooth and your illustrated sample. Think on these lines: https://codepen.io/lukasoe/pen/YNEoQR https://codepen.io/pmk/pen/YPdJax Otherwise, you could do several morphs, or a sprite map as mentioned above. Here's a sample of a sprite animation that I created just using GSAP's stepped ease.
  16. I think what you are looking for is `.add()` See the documentation here: https://greensock.com/docs/TimelineLite/add()
  17. Hi @BBaysinger. I'm with @GreenSock in that a simplified Pen may shed some clarity on what you are looking to achieve. That said, reading between the lines, the FLIP principle that @OSUblake, recently mentioned seems like it may be what you're looking for: https://aerotwist.com/blog/flip-your-animations/ See his CodePen example here:
  18. @OSUblake This is a great resource!
  19. Hi @andrewchar, It appears the scripts in your CodePen aren't linking up correctly. It works best to add the scripts by clicking the gear icon next to the JS section in your codepen. The effects you're looking for should be achievable with SM and GSAP.
  20. Hi @olivierlarose1@gmail.com, and welcome to the GSAP forms. If you were to create the animations in GSAP and added those to your ScrollMagic Scenes you could reverse them. The animations in your example are just CSS animations based on class. Please also note that ScrollMagic isn't part of GSAP.
  21. Hi @nickelman Do you have a codepen showing your progress? https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ I'd probably approach this as a series of .from()'s as the final positioning will be trickier to get accurately than the starting point. A bit pinned at the moment but, if I have time later, I'll see if I can put something rough together.
  22. @Sahil @GreenSock Super helpful! Thanks again! Sahil, your CodePens are amazing, inspiring, and very easy to follow, just wanted to give you an extra thanks! I ended up using ticker for the animation I'm working on I posted it on the other thread, but will here as well in case someone stumbles on this.
  23. @Sahil @GreenSock Thank you so much for your tips! I was able to apply them, as well as some I picked up diving a bit deeper in the forms here. Here's what I'm hoping is near the final product:
  24. Hey GSAPers, Was thinking about this last night, and didn't see it in the Docs, what's the difference between onUpdate and TweenLite.ticker.addEventListener(); speed of fires, etc? If both are equally available which is more performant? Thanks, Ryan