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

140 Specialist

About elegantseagulls

  • Rank
    Advanced Member

Contact Methods

Recent Profile Visitors

1,137 profile views
  1. elegantseagulls

    Custom Ease vs Bezier vs Bigger Timeline Performance Question

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

    1 FPS with DrawSVG on Chrome + Mobile (FF works!?)

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

    Help - custom carousel bug

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

    Need help to animate a analog clock

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

    Close Overlay On Broswer Back Button

    @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!
  6. elegantseagulls

    Why Doesnt The "left" property work for this?

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

    Enlarging dot on hover (beginner)

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

    Animation runs choppy - how can I fix it?

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

    Which scripts need to be included?

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

    Thanks Greensock | SOTD & DEVELOPER on Awwwards. 🏆🏆

    @Victor WorkCongrats! Beautiful site!
  11. 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.
  12. 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.
  13. 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 })
  14. 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.
  15. 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()