Jump to content

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

Shaun Gorneau last won the day on September 29 2020

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Content Count

  • Joined

  • Last visited

  • Days Won


Shaun Gorneau last won the day on September 29 2020

Shaun Gorneau had the most liked content!

Community Reputation

1,869 Superhero


About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
  • Location
    Hartford, CT

Recent Profile Visitors

7,276 profile views
  1. Hi @Whitfield, You certainly can do it with a clip-mask ... https://codepen.io/sgorneau/pen/GRrXVZx?editors=0110 But, I like the control that is afforded by animating a parent container within a wrapper, especially when it comes to tweening other properties at the same time. What's the reason you are hoping to move away from a wrapper? Is it the extra markup? If that's the case, you can have Javascript create the wrapper, that way your markup stays lean/focused.
  2. Part of the misunderstanding here is that GSAP, at its heart, is designed to look for and tween numeric values. Things like x, y, scale, perspective, opacity, etc. When it encounters non-tweenable (non-numeric) values -- like display, position, text-align, etc. - what tends to happen is a jump to the new value. I say "tends to" because there are cases where GSAP is designed to accept string values; color values for example. In other cases, it parses an integer out of a string value to do what it can with it. In this case, your image filenames contain digits which can be parsed out. But that, i
  3. It would be helpful if you put this in a CodePen so we can see what is actually happening. I see a few issues, but they would best addressed once we see it in action. https://codepen.io/GreenSock/pen/aYYOdN
  4. Hi @Drexel, For stop motion, you really don't want to tween any values between 0 and 1 (which autoAlpha will), you want to use more binary properties like `visible` or `display`. Here is an example https://codepen.io/sgorneau/pen/mdRBpzK?editors=1010
  5. I don't see this issue in iOS Safari ... in which device/browser are you seeing the issue?
  6. Hi @SLSCoder, I believe you're looking for overflow: hidden. https://codepen.io/sgorneau/pen/RwKoWdw
  7. Happy to help, @Conill Blanc!
  8. @AlexN welcome to GSAP! The trick here is to yoyo each individual stagger tween but repeat the overall "to" tween (not the stagger). The other little tidbit is that yoyo only works if there is a repeat value greater than 0. So repeat -1, 0, or no value will not produce the yoyo. Putting repeat: 1 within the stagger will take care of that. Have a look here, https://codepen.io/sgorneau/pen/abpmqjw
  9. Hi @Conill Blanc and welcome to the forums! If I understand correctly, I think what you're looking for is to sequentially tween 4 elements; the image, a blue border, a magenta border, and a yellow border. Something like this, https://codepen.io/sgorneau/pen/JjERyYg
  10. I think you may be looking for something like this. https://codepen.io/sgorneau/pen/dyNGXNG
  11. This depends on how it got the center position initially (css properties left, transform, margin-left, etc.). In plain language, you need to set its x position to screen.width minus its current x position plus half the element width.
  12. Hi @momciloo, I think, perhaps, you would be better off with a timeline in this case rather than competing tweens. https://codepen.io/sgorneau/pen/abZgrRR?editors=1010
  13. Hi @PG1, You could use onUpdate to check the tween's progress and apply the front class where needed. https://codepen.io/sgorneau/pen/xxOBjRz Hope this helps!