Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Shaun Gorneau last won the day on March 3 2019

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Shaun Gorneau

  1. Hi @yoshyosh! Welcome to GSAP What are you reviewing this in? FWIW, everything looks very good here in Safari, Chrome, and Firefox in MacOS.
  2. 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
  3. 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.
  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. 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.
  7. Hi @Kutomba, I think you should take a look at staggerTo() https://codepen.io/sgorneau/pen/Nmpmmx
  8. 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
  9. @Mukaytegin ... let me first ask ... what would be the condition under which "active" would be added as a class to #textDiv?
  10. There is no version of GSAP that requires jQuery.
  11. 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
  12. 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
  13. Here is a CodePen briefly illustrating the user's scroll position dictating the timeline's progress. https://codepen.io/sgorneau/pen/mgPrRW
  14. @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
  15. I think the problem is (if I'm understanding you correctly) is that progress is not set with x% ... it's set with a value 0 to 1 (.5 being the halfway or 50% mark). So, you should not deal at all with % or +/- values when setting progress. It would simply be a calculation of scrollPosition/documentHeight. That formula will always return a positive value (save for elastic scrolling where negative values can become a factor) >= 0 and <= 1.
  16. Let us know how it works for you!
  17. Hi @creativeocean, that's something that has bugged me in the past too. In thinking about it ... scale is similar to moving something away-from/toward you ... so why not tween the z property!? I believe scale operates quite a bit differently than 3d transforms ... and 3d transforms tend to be "better". Certainly looks better to me in Chrome! https://codepen.io/sgorneau/pen/qwOdeG
  18. Hi @wcomp, have look here
  19. Hi @friendlygiraffe, I'm not quite sure what you're after ... but any from() tween is going to immediately set the from values by default (immediateRender is true). So you may be looking for immediateRender:false
  20. Hi @DevSaver, we've been dealing with the same type of question over here ... I think it would help you.
  21. headlines_tl.progress(1,false) will certainly push the playhead to the end of the tween while supressing events ... is that what you're looking to do? To pause the Timeline, you can always use headlines_tl.pause() ... but I'm not sure if you want to jump to the end, or pause it ? What is your overall goal?
  22. Hi @Bencius, You can certainly update the ticker content anytime and fire of the clone, position, duration logic for new content. But to have it update without noticing entirely depends on where the content is updated. If it's within the first visible portion of ticker, that would switch quickly at the start of the Tween and be noticed. If the affected text is outside of the visible area, then it would go unnoticed. If you are going to be dealing with dynamic content, I would look at creating content containers adhoc, appending them to a timeline, and calculating their duration based on their width. And "looping" would mean circling around and appending the same content again ... not repeating the tween. It would be one long ever changing timeline full of dynamic tweens. Hope this helps.
  23. This is a safe place, @emilychews! Happens to all of us! Just a few days ago, I sat and stared at the following wondering why it wasn't working ... for too long. document.ready( function(){ //stuff }); I get it ?