[Flip Toggle using 2 different buttons]

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!

See the Pen qBVYgRa?editors=1111 by icekomo (@icekomo) on CodePen

[Trying to animate Grid Template Rows height]

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

[Trying to animate Grid Template Rows height]

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.

See the Pen abVGZvV by icekomo (@icekomo) on CodePen

[ScrollTrigger over top of absolute position elements]

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

[ScrollTrigger over top of absolute position elements]

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

See the Pen KKXyYao by icekomo (@icekomo) on CodePen

[Using .from in 2 different functions giving unexpected results]

Thank you for sharing this!

[Using .from in 2 different functions giving unexpected results]

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());

 

See the Pen bGoGGjP by icekomo (@icekomo) on CodePen

[Trying to create a stop motion with stagger + ease:steps]

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.

See the Pen JjErOaj by icekomo (@icekomo) on CodePen