Shaun Gorneau last won the day on March 3

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Content Count

  • Joined

  • Last visited

  • Days Won


Shaun Gorneau last won the day on March 3

Shaun Gorneau had the most liked content!

Community Reputation

1,419 Superhero


About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
  • Location
    Hartford, CT

Recent Profile Visitors

5,139 profile views
  1. Shaun Gorneau

    Very simple scroll animation using Tweenlite

    Easier than explaining .. here is a simplified version for you to pick apart to see one way it could be done
  2. Shaun Gorneau

    addEventListener not working

    Hi @harp, The onComplete needs to call an anonymous function, like so, 7 , { width: '100%', ease: Power4.easeOut, onComplete: function(){ fadeOutHeroContent(); }}); And the listener is "listening", but not responding how you expect it to. Try standalone tweening the element's opacity rather than adding to the Timeline. Edit: Darn it @PointC ... didn't see you I there.
  3. I mean, that is step 6!! 🤣
  4. Doh! I wasn't even paying attention to that!! 🤦‍♂️
  5. @TimeFrame Even though the Tweens are being added to fixed positions, the timeline duration is getting greater each time openLeftMenu() is called ... $('body').on('click', '.hamburger', function () { if ($(this).hasClass('is-active')) { hideLeftMenu(); } else { openLeftMenu(); } }); with openLeftMenu() calling animationCanvas() which in turn appends a sequence of Here are 10 "open" clicks on .hamburger And here is the output of a Pen where animationCanvas() is called once, and .hamburger clicks invoke and tweenNavigation.reverse(). Best to create the Timeline once and just use methods to control it.
  6. Shaun Gorneau

    applying animation after adding a class

    Happy to help!
  7. The problem, from what I can see, is that openLeftMenu() is calling animationCanvas() each time, and animationCanvas() is appending the menu tweens to the timeline. Each time that happens, it will move further and further down the timeline. I’m on mobile right now ... so I can’t get too involved with code ... but I will in a bit.
  8. Shaun Gorneau

    How to hide elements in sequence using tweenmax?

    Hi @Kutomba, I think you should take a look at staggerTo()
  9. Shaun Gorneau

    applying animation after adding a class

    You can bind DOMSubtreeModified to listen for changes to the element's properties (i.e. classes, data attributes, etc.). In this Pen, a button click adds the data attribute, and the listener reacts to that.
  10. Shaun Gorneau

    applying animation after adding a class

    @Mukaytegin ... let me first ask ... what would be the condition under which "active" would be added as a class to #textDiv?
  11. Shaun Gorneau

    Gsap without Jquery

    There is no version of GSAP that requires jQuery.
  12. Shaun Gorneau

    Never used Gsap before.

    OK, I'll preface this with ... I'm a fan of "practical effects", so my ideas may not mesh well with your ultimate vision. But .. here goes. Option 1 ... disappearing into the black hole immediately. Uses an offset parent with overflow hidden Option 2 ... disappearing into a gradient. Uses the same parent with overflow hidden ... but not offset. Overlaid by a div with an opacity gradient.
  13. Shaun Gorneau

    Never used Gsap before.

    Hi @scatterbrainz ... it's tough to know exactly what effect you're looking for, but here is a CodePen that can get things rolling and we can work from there to understand what it is you would like to do. Hope this helps!
  14. Shaun Gorneau

    Playing a progress controlled timeline in reverse

    Here is a CodePen briefly illustrating the user's scroll position dictating the timeline's progress.
  15. Shaun Gorneau

    Text jitters in Chrome

    @creativeocean I'm curious why you put the force3D on the inner text element in example 2 vs on the wrapping element. Are you seeing better performance with that? In this pen, I see examples 2 and 3 behaving virtually the same in Chrome, where 2 has force3D on #search2 and 3 had force3D on #searchTxt3 Just curious