Shaun Gorneau

Hi @scavaliere, Two quick things. You can't start an id with a digit, it must start with [A-Za-z] Before scrollTo can do its thing in response to clicking on an anchor, you must first prevent the default behavior (which is to jump to the position of an element with a matching name or id) https://codepen.io/sgorneau/pen/BapbRXv Hope this helps! Shaun

Hi @Kelimino, A few things that stand out to me are You're recreating the timeline multiple times rather than adding tweens (or other timelines) to it While call() would work here on appending tweens/timelines, you are appending it to a single timeline each time that timeline is recreated Unrelated to the issue; if you define a from() tween, it will perform that tween from the defined property values to the element's current values, so you don't need to follow up with a to() tween ... unless your defined end target values that are not the values in place before the from() is called. I think an easier way to handle this would be with ScrollTrigger.create() and not make use of any timelines (along with not worrying about defining any toggleActions). I think it's easier to use the callbacks onEnter and onEnterBack to update the counter and perform a simple tween on it. Also, adding end points gives you better control over when to trigger onEnterBack for better usability. Without defining them here, onEnterBack into slide 1 would not be triggered because the scroll can't reach the trigger point. Have a look here, https://codepen.io/sgorneau/pen/KKaEgvZ?editors=0010 Hope this helps!

Ah, ok. Have you looked into fill-opacity and stroke-opacity for the SVG elements you'd like to affect?

Do you have a link we can look at?

@Ravi Variar, what is it about the parent element that you would like to be transparent/semi-transparent without affecting the child element? If it’s the background-color and/or border-color (or other similar attributes) you can use rgba values to apply an alpha channel value.

Hi @scavaliere, A few quick things I notice (in general) that you'll want to fix up ... autoAlpha (as all properties are) is case sensitive. I notice your were typing `autoalpha` opacity is affected by autoAlpha, so you should not define values for both properties you mixed gsap and TweenMax. TweenMax is old syntax, you should only use gsap.method() Now, for your specific issue, because you're wanting to establish some sequencing, you should use a timeline rather than a simple tween. Have a look here, https://codepen.io/sgorneau/pen/XWpoqwJ?editors=1010 Hope this helps! Shaun

While child elements don’t inherit their parent element’s opacity, they are affected by it. If a parent has an opacity less than 1, the child’s appearance (even though its opacity is 1) has a new maximum opacity of the parent. The child can be made to appear more transparent but not more opaque. If you need elements to have different opacity values while maintaining full opacity on at least one of them, they have to be at similar DOM depths.

Hi @Sam Smith, There are two was you can tackle this ... each affect it differently. If you want to change the opacity of the star, you could tween the opacity of the element that has the star.svg assigned as a background (just as you would for any element with an image as a background). But, I think you want to affect a specific attribute of the SVG, not the element presenting the SVG itself. For that, the SVG needs to be in the markup to be accessed like any other DOM element. https://codepen.io/sgorneau/pen/rNjoWKj Shaun

For that you'd just want to remove the tween on .image-title. I also change the hover event back to a higher parent to account for the bigger area being the active zone. And you'll want to add a media query to handle the wrapping that would occur at smaller screen sizes. Have a look, https://codepen.io/sgorneau/pen/eYgbBVd?editors=0010

Hi @tallulahh, There are a few things going on here that will compete with each other at times, producing unexpected results. Here are a few tips I can point out to help reduce the chances of unexpected results. When at all possible, rely on the DOM hierarchy to handle stacking order. While it is reasonable to modify z-indexes to change stacking order, many times it's just not necessary. Removing that from the equation greatly reduces the potential for the unexpected. In my fork, I flipped the order of the .image-overlay and the img within .overlay-container. If you expect Javascript to change a CSS property on an element, use Javascript to set its initial presentation value too; don't use CSS to define initial properties (like opacity and visible) that will be tweened. You can see I went through the CSS and ripped out all things z-index, opacity, visible, etc. This will also help with graceful degradation in the event that Javascript doesn't execute. When possible, create a timeline once (not over and over with each event trigger). When possible, don't use two timelines to control the same elements. In your example, a timeline is created for each of the in/out states. But we can create one timeline and play it forward/reverse as needed for the hover event. Lastly, by dynamically creating variable names for timelines, we can create them (once) and address them repeatedly without the need to keep recreating them and without the bulky logic of switch statements. Have a look here https://codepen.io/sgorneau/pen/zYNyBxp?editors=0010 Hope this helps! Shaun

Hi @Paz, This is a combination of some initial values, set()s, to()s and from()s; they can come together to create unexpected results because some values are applied before the tween begins. I find in cases with several tweens in a timeline, it's best to use set() up front to establish inital property values, and then use to()s from there. Have a look, https://codepen.io/sgorneau/pen/bGgmqmJ?editors=0010

Happy to help, @Whitfield!

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.

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, in turn, creates a filename that does not exist. The bigger problem here is that src isn't "tweenable". Meaning, changing the image src from one path to another doesn't create a tween between the two values. I think what you're looking to do is fade (or cross dissolve) between 2 or more images in sequence. For that, you don't change the src value at all, just the tweenable property `opacity` -- or better yet `autoAlpha` -- of a series of images. https://codepen.io/sgorneau/pen/OJWvYaE?editors=0010

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

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

I don't see this issue in iOS Safari ... in which device/browser are you seeing the issue?

Hi @SLSCoder, I believe you're looking for overflow: hidden. https://codepen.io/sgorneau/pen/RwKoWdw

Happy to help, @AlexN!

Happy to help, @Conill Blanc!

@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

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

I've been hiding ?

I think you may be looking for something like this. https://codepen.io/sgorneau/pen/dyNGXNG

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.