Jump to content

Shaun Gorneau last won the day on March 3

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators
  • Content Count

    630
  • Joined

  • Last visited

  • Days Won

    21

Everything posted by Shaun Gorneau

  1. Hi @andystent, There's a lot going on in your pen .. and a lot of duplication of work which could be greatly simplified. That said ... consolidating everything (kind of as is) into single calls will make one button press control two sets of tweens. https://codepen.io/sgorneau/pen/mYwOdP?editors=0110 But, you should look at refactoring your code to get rid of unnecessary complexities.
  2. Hi @Tejaxx7, Here is a Pen I put together demonstrating the seconds (ones/tens independently) to achieve the analog rolling effect. You could use the same techniques to bring the minutes and hours into play. If you need to present a specific time before tweening, you could get all time values individually and set the progress() of each respective timeline. https://codepen.io/sgorneau/pen/qGaxdV?editors=1111 Edit: I left overflow visible in the pen so you can see what's going on. You can change that in the CSS to get your final effect. Happy tweening!
  3. Who is claiming that Cloudflare *isn't* GDPR compliant and in what way are they failing? https://www.cloudflare.com/gdpr/introduction/
  4. HI @JonQuayle, A couple problems ... in some places you are using what look likes jQuery syntax, but jQuery is nowhere to be found. With calling in jQuery and modifying a few things to make use of it ... you should be good. https://codepen.io/sgorneau/pen/bypvpa Also, there was an extra parameter being passed in your .to calls ... I stripped that out. .to uses .to( target:Object, duration:Number, vars:Object, position:* ) : * You were passing .to( target, duration, vars, position, somethingElse)
  5. LOL ... I'm usually the passenger in that car! 🤦‍♂️🤣
  6. Because the requirement was that one stays behind, and the other moves to the destination box. I could just as well have Tweened the clone and stated "Don't tween the original".
  7. xPercent: -100, x: window.innerWidth
  8. @helleholmsen, There are a few times in the past where I've shown how to deal with similar speeds over different distances. Maybe these can help, https://codepen.io/sgorneau/pen/grLqYB https://codepen.io/sgorneau/pen/mWEddP I'll try to find others (I wasn't very good at categorizing them 😣 )
  9. Hi @jesper.landberg, You could do something like this https://codepen.io/sgorneau/pen/OYMZEL Happy tweening!
  10. https://codepen.io/sgorneau/pen/oRbEJX
  11. Hi @elegantseagulls, I'm rendering with some outlines to make it more obvious the "what" ... but I haven't figured out the "why". The "what" is that while the character bounding divs (.point) are the correct size, the characters within are being stuck to the left edge. I think the snap (upon calling mySplitTextH1.revert() )is them moving into a position that would be very close to centered within those divs. https://codepen.io/sgorneau/pen/eaNQzJ?editors=0110 But, all of my positioning techniques for those characters is proving useless at this moment. I'm sure I'm missing something obvious, however 🤣 ... so a solution is on the way!
  12. @Paul Schlereth, You can move the `onComplete` parameter to the master Timeline and call `data` there var master = new TimelineMax({ repeat:0 , onComplete:data}); You can add all you want to any timeline that is part of the master timeline, and it will wait until it's done. https://codepen.io/sgorneau/pen/LoVmmo?editors=1010
  13. Hi @reidb, Unless you have a lot more going on with ScrollMagic ... I would suggest using jQuery Waypoints to trigger the squiggle tween. It's a lot simpler for this use case https://codepen.io/sgorneau/pen/zQGPLd?editors=0010
  14. Hi @Julia, It's calling it ... but just calling it hundreds of times! Have a look here to see one way of making sure it's called once, https://codepen.io/sgorneau/pen/Pvwqpe Happy tweening!
  15. Thanks Craig! I made a few changes and completely forgot to mention them (and why I made them) ... you da man 🤜🤛
  16. Hi @Bobby Ballard, The issue is that your trying to include TweenMax from https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.max.js ... which doesn't exist. It should be https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js https://codepen.io/sgorneau/pen/BeaYmv
  17. Hi @yoshyosh ... you were very, very close!! In the following pen, have a look at lines 10 and 14. Instead of repeating the master timeline (which will wait for all child tweens to complete, resulting in a gap), repeat each child tween independently. https://codepen.io/sgorneau/pen/JVgPLB
  18. Legitimate concern ... I’m not too sure how Google handles divs and spans within heading tags. But, you could choose to execute/not execute certain scripts based on the reported user agent. User a server side script to put a class on <html> And then use the presence (or not) of that class as a hook in your script.
  19. Hi @yoshyosh! Welcome to GSAP What are you reviewing this in? FWIW, everything looks very good here in Safari, Chrome, and Firefox in MacOS.
  20. 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
  21. 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.
  22. Doh! I wasn't even paying attention to that!! 🤦‍♂️
  23. @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.