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


About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
  • Location
    Hartford, CT

Recent Profile Visitors

5,562 profile views
  1. 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.
  2. What should we be seeing in Step 5? Following steps 1 through 4, I see a fully functioning menu (show/hide) with the stagger working correctly on menu items and the Y translate in working order.
  3. You're welcome! As for ongoing questions ... if they're pretty much related to the title of this post, then following up here is just fine. If it's a new topic altogether, it would be best to create new post with a title relevant to the question at hand. That keeps threads shorter and entirely relevant. That said, feel free to ask as many questions as you like! Someone is sure to jump in and offer help or advice. As far as ScrollMagic .. you may get some pointers, but that is not a GSAP product, so you may not get an answer specific to your issue (if you have one). Happy tweening!
  4. Hi @Robhern135 To have a timeline only affect the clicked element, that timeline needs to have only that element as a selector within it. If you move the timelines and the click event to within the scope of .each(), you should get what you're looking for. https://codepen.io/sgorneau/pen/NWKLyQO?editors=0010
  5. I would create labels, have the slider intervals mapped to specific labels, and use tweenTo() to, well, tween to those labels
  6. Before we dive into this ... please explain the desired outcome. I have a feeling there is another way to tackle this.
  7. Awesome, glad it worked out! Good luck with the project!
  8. OK, I changed the logic of the when and where hiddenContent is set to 0 ... it's now part of a fromTo. Have a look, https://codepen.io/sgorneau/pen/pozdPxL
  9. Ah, I’m on mobile and scrolling to see the behaviors ... that’s probably happening off-screen for me I’ll be on a desktop in about 15 minutes and will have a look
  10. Hi, no worries about asking questions ... that’s what this forum is all about! As for the height not tweening back to 0 ... I’m not seeing that here.
  11. That won't make much of a difference. CSS height 100% doesn't mean anything on an element without an ancestor with a defined height. But, you can get the element's pixel height at any time and use that value. One problem here is that CSS is setting the height to 0 ... so that's what it is. You can avoid setting the height in CSS and use GSAP to set the height to 0 in the timeline. That way we can capture its height before it becomes 0. Have a look here (line 12 and line 15) https://codepen.io/sgorneau/pen/pozdPxL?editors=1111
  12. Yes, grab the height on the fly using JavaScript.
  13. Hi @Daniel Hult, The reason for the jump is that you're setting the element's height to 100%, but it has no basis for that height in the cascade. Setting it to a pixel height will give it something to tween to. That could be a pixel value defined by you or calculated with Javascript by getting the element's current height. I've set it to 200px for demonstration. I've also got some code in there (commented to explain) that sets the positions of everything as if the Timeline has already played (because it has!). Due to (my quick guess) a negative offset of the fromTo tween, you get different positions after the timeline has played through and reversed when compared to not having played yet. https://codepen.io/sgorneau/pen/pozdPxL Happy tweening!
  14. Ah ... I see. Makes sense based on both the image and the text each towing in their successors. While presentationally that's cool if Javascript is doing its thing ... it's a bit out of wack from an accessibility standpoint (and certainly if Javascript fails for some reason). I would recommend the HTML side of this is structured semantically, and then let Javascript reconstruct for the presentation. Have a look at the Pen below ... Lines 4 through 30 are just about manipulating the DOM to go from semantic markup to presentational structure. Lines 32 through 58 are just about looping through slides and titles to create a timeline and set its initial position. Lines 61 through 91 are about controlling the timeline and looping around when needed. You would probably also want to look at suppressing click events during slide tweens. https://codepen.io/sgorneau/pen/jONGJre?editors=0110 Hope this helps!