Jump to content

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

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,569 Superhero


About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
  • Location
    Hartford, CT

Recent Profile Visitors

5,742 profile views
  1. Hi @vektor, The problem here is tweening the left and right properties. That's typically no fun because those properties are affected by the element's position property. While sometimes left/right has its place ... it usually best to to tween x/y. To do so in this case, we have to define points offset from the midpoint of the page (window.innerWidth), initially move to those points, and then move back to {x: 0} Have a look here. Hope this helps! https://codepen.io/sgorneau/pen/XWWyjMP?editors=0110
  2. Good point, @ZachSaucier! I was answering this within the scope of a few tweens, but neglecting to say that could certainly be problematic for more complex setups! Thanks for highlighting that.
  3. Hi @Aleksei, You can use gsap.defaults() to pass along any default values you want to any tweens Happy tweening! https://codepen.io/sgorneau/pen/rNNZbqE
  4. Aye aye aye ... yeah I have some network issue going on over here. Hopefully I get it cleared up soon!!
  5. I see no lag or stutter on the first run here in Safari and Firefox on MacOS 10.15. I do see a stutter on the first run here in Chrome on MacOS 10.15, although I'm not sure why. It does have something to do wit the image in the right column. Removing that image removes the stutter. EDIT: Whoops! I submitted this hours ago, but it just went through (probably an issue on my side). The amazing @ZachSaucier has got you covered though!
  6. Hi @daafiejd If I understand correctly, you're looking for some sequencing to play forward and backward based on the state (class) of the the hamburger button. Rather than separate tweens on each pane, I think a single timeline handling the sequencing is what you're after. Have a look here. https://codepen.io/sgorneau/pen/OJJZQEN?editors=1011
  7. Hi @DD77 Heights are tricky! I've always found it easiest when tweening from 0 up to a non-specified height to immediately .set( element , {height: 0} ) and tween .from( element , {height: 0} ) Have a look here. Hope it helps! https://codepen.io/sgorneau/pen/abbmmGQ
  8. @brnlmco That's far too much to wade through to help. If you have this running live somewhere, I may be able to help by looking into developer tools. But, knowing that scrollTo works quite simply, if it's not working for you I have a feeling there is some other JS interfering.
  9. You got it! I think Jonathan has you covered on the rest 👍
  10. Hi @brnlmco, Have a look at the ScrollToPlugin and Easing ... and the CodePen to see how simple this can be! https://codepen.io/sgorneau/pen/oNNLEpY?editors=1010 Happy tweening!
  11. Tough without seeing your code, so I'm making some assumptions here ... why not use addCallback without assigning it a position? https://codepen.io/sgorneau/pen/JjjYzLz?editors=0011
  12. Hi @Galanthus, I'm not sure your requirement is to use canvas for this, but this is something GSAP can certainly handle. You can choose to use jQuery (or not) for simplifying some event listeners ... regardless, the GSAP part is very simple! I would use simple Tweens vs Timelines because there isn't too much to control. Here is an example ... note I haven't gone through the effort of placing the images in a mosaic fashion ... but you'll get the idea. https://codepen.io/sgorneau/pen/zYOVMpw
  13. Ah, I see now. I have dev tools pop open in a new window ... having dev tools stick to the bottom of the browser window (effectively resizing the viewport) does produce the issue you described. But, actually resizing the viewport (pulling the top or bottom edge to expand) does not produce this error. So I would say this is a browser bug in not reporting the appropriate viewport dimensions after the console affects the viewport.