elegantseagulls last won the day on October 20 2018

elegantseagulls had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


elegantseagulls last won the day on October 20 2018

elegantseagulls had the most liked content!

Community Reputation

115 Specialist

About elegantseagulls

  • Rank
    Advanced Member

Contact Methods

Recent Profile Visitors

1,063 profile views
  1. elegantseagulls

    How do i do fade in / fade out effect in ScrollMagic + gsap ?

    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.
  2. elegantseagulls

    Infinite Scroll - Load Next Post

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

    Bending object as its animated along bezier path?

    @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 })
  4. elegantseagulls

    Bending object as its animated along bezier path?

    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.
  5. elegantseagulls

    What is the right way to merge multiple parallel timeline into one

    I think what you are looking for is `.add()` See the documentation here: https://greensock.com/docs/TimelineLite/add()
  6. elegantseagulls

    TimelineLite.from() does not work if time is less than 0.0000003

    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:
  7. elegantseagulls

    Proper way to animate responsively

    @OSUblake This is a great resource!
  8. elegantseagulls

    animating text in scrollmagic pins with greensock

    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.
  9. elegantseagulls

    ScrollMagic reverse animation

    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.
  10. elegantseagulls

    How to make this transition?

    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.
  11. elegantseagulls

    onUpdate vs Ticker

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

    Custom Ease vs Bezier vs Bigger Timeline Performance Question

    @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:
  13. elegantseagulls

    onUpdate vs Ticker

    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
  14. elegantseagulls

    Juicy.. I'm looking forward to making tutorials!

    Hey @DesignCourse! @Ihatetomatoes - Has some on his site: https://ihatetomatoes.net/ @sdrasner 's Frontend Masters course: https://frontendmasters.com/courses/svg-animation/ Are good starting points imo.
  15. elegantseagulls

    Custom Ease vs Bezier vs Bigger Timeline Performance Question

    @Sahil Really helpful tips here! Thank you! I'm still wrapping my head around some of the canvas properties and how they work, constructing the path in loop will really help simplify. Appreciate the resource links too! thanks!