Drexel

I'm trying to understand a few Flip aspects of this demo. 1. Is it possible to have a toggle that is controlled by 2 different buttons? Would I need to different States for that to work? How would i capture the 2nd state? 2. After the flip plays through the first time it seems to break the layout after that. Thanks for the help!

Thanks for the responses.. looks like I'm off to learn Flip!

I'm trying to animate grid template rows with a gsap timeline. It kind of works, but the reverse isn't correct and I'm not 100% sure if this is even possible.

@OSUblake Thank you, it was as easy as just adding position: relative to the .bar class. Thanks!

This might be sometime simple that I am missing. I have a couple simple scorllTrigger elements and they work just fine. I also have a simple mobile menu that I built and is using absolute position to sit over the entire viewport when activated. This is also working as intended. What I can't seem to figure out is the elements that I applied scrollTrigger on are sitting on top of my absolute positioned elements. No matter how big I make the z-index for the mobile menu the scorllTrigger elements are always on top. I'm hoping this is a simple thing that I overlooked in the docs. After a little more digging it seems that this is causing the issue gsap.set(".yellow-bar", {transformOrigin: "left center"}); When you scroll the codepen you should not be able to see the bars added a codepen to show the issue

Thank you for sharing this!

I have a simple animation of a red box. I have a main timeline and each animation is broken into different functions and those functions return their timeline and that is added to the main timeline. Since I am using .from for each call I would think that the red box will animation from the position it is sitting in the DOM originally. This works for the first one as expected, but the 2nd .from seems to use the "+=500" as the ending point. So when moveTwo is called the red box ends up at the +=500 position. Why doesn't the red box animation from the position of 0 each time? Do I have to use a set to capture that original position because the first .from is actually setting the x position of the red box? Thanks for clearing this up for me. const mainTL = gsap.timeline(); function moveOne(){ const tl = gsap.timeline(); tl.from("#red",{x:"+=500", duration:1}) return tl; } function moveTwo(){ const tl = gsap.timeline(); tl.from("#red",{x:"-=200", duration:1}) return tl; } mainTL.add(moveOne()) .add(moveTwo());

I'm trying to create a stop-motion effect with some <g> tags in an SVG. I created a CodePen to show you how I set things up, but I don't seem to have a "stop motion" type of animation (more like a flicker of sorts). I'm sure I'm missing something simple, but I just can't seem to figure it out. The goal is to have an animation of the football spinning.