Jump to content

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

Shaun Gorneau last won the day on September 8 2021

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Posts

  • Joined

  • Last visited

  • Days Won


Shaun Gorneau last won the day on September 8 2021

Shaun Gorneau had the most liked content!


About Shaun Gorneau

  • Birthday May 31

Contact Methods

Profile Information

  • Gender
  • Location
    Hartford, CT

Recent Profile Visitors

8,454 profile views

Shaun Gorneau's Achievements

  1. Hi @Walek, Have a look at svgOrigin https://codepen.io/sgorneau/pen/oNwBJmj?editors=0110
  2. Wow ... i guess we all hit submit at the same time! 🤣
  3. Hi @Joe165, You can look into Window.matchMedia() https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia to check conditions to determine how/when you want certain tweens/timelines to fire.
  4. It's the position parameter. It tells the tween when to happen in the overall timeline ... absolute timing in terms of seconds from the beginning, at a defined label, or relatively from the previous tween (amongst other things). Have a look here, Note, I used a timeline with the idea that you would have a lot more happening that might require sequencing. This could be done with two separate tweens which would not require any positioning since simple tweens aren't sequenced in any way. https://codepen.io/sgorneau/pen/rNwLbOE
  5. Hi @flefloch, The reason for this is that CSS transforms do not disrupt flow. The parent element still sees it in its original position and behaves accordingly So, there are a few ways you could handle this. You could change the element's position property to absolute after the tween, that way the parent is sized based on the new flow. https://codepen.io/sgorneau/pen/OJgXqLM Or you could tween the parent's size (depending on how dynamic this scenario is). https://codepen.io/sgorneau/pen/powbYzr There are certainly other ways to handle this depending on the complexity of the overall scenario. Hope this helps! Shaun
  6. The best way is to learn the fundamentals and then start with small projects; projects with one goal. More complex projects are really many small projects that work in concert. You can sign up for e-classes or even learn from YouTube videos.
  7. It's Javascript errors. Reducing your Javascript code to the basics for this shows that your code above works just fine. https://codepen.io/sgorneau/pen/WNOrMKE
  8. A few quick things. 1. There are errors all throughout the HTML (within the SVG markup), CSS, and Javascript. 2. There is far too much going on to truly get a grasp of what you are trying to do and, furthermore, help you achieve that. Simplify the problem down to the basics and we can help you from there. That doesn't mean you won't get answers to the more complex workings, it will just help us to provide answers that you can build on. Shaun
  9. There's a few ways you can do it ... If part of a timeline, give that tween a longer duration. You could also affect the timescale ... but, without more information, I think a longer duration would be a better fit. Another option is to define an end value that is over a large pixel (or a calculated) value.
  10. Hi @Alexander S., One way you can achieve this is to move from a tween to a timeline and allow scrollTrigger to control the timeline. Then, you can tack on an empty tween with a relative position to achieve the "pause" ... which is really just a tween affecting/doing nothing for a specified amount of time. https://codepen.io/sgorneau/pen/KKWNvaL?editors=0010 Hope this helps! Shaun
  11. Hi @ZORGOBORGO You can accomplish this with GSAP alone (which I would recommend) by pulling that tween out of the timeline and making a call to a separate tween at that point of the timeline (with a conditional check to see if it's already been called). https://codepen.io/sgorneau/pen/wvJovBd?editors=0010