Shaun Gorneau last won the day on March 3

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators
  • Content Count

    610
  • Joined

  • Last visited

  • Days Won

    21

Shaun Gorneau last won the day on March 3

Shaun Gorneau had the most liked content!

Community Reputation

1,419 Superhero

7 Followers

About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
    Male
  • 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 https://codepen.io/sgorneau/pen/ZZJENP?editors=0111
  2. Shaun Gorneau

    addEventListener not working

    Hi @harp, The onComplete needs to call an anonymous function, like so loading.to(progressBarEL, 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. https://codepen.io/sgorneau/pen/qwmvyb 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 tweenNavigation.to(). Here are 10 "open" clicks on .hamburger https://codepen.io/sgorneau/pen/ZZKqzK And here is the output of a Pen where animationCanvas() is called once, and .hamburger clicks invoke tweenNavigation.play() and tweenNavigation.reverse(). https://codepen.io/sgorneau/pen/rbmqrK 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() https://codepen.io/sgorneau/pen/Nmpmmx
  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. https://codepen.io/sgorneau/pen/rbyPmK
  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 https://codepen.io/sgorneau/pen/dLOpKx Option 2 ... disappearing into a gradient. Uses the same parent with overflow hidden ... but not offset. Overlaid by a div with an opacity gradient. https://codepen.io/sgorneau/pen/EJNZZZ
  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! https://codepen.io/sgorneau/pen/yrVOpw
  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. https://codepen.io/sgorneau/pen/mgPrRW
  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 https://codepen.io/sgorneau/pen/xeVONN?editors=0110