Jump to content
Search Community

Add class to the animated element based on the state of the transition

RolandSoos test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a special case when my layers sits in a container element which must be visibility:hidden. The elements in the container are visibility:visible, but I need to make them visibility:hidden when the opacity is 0.

 

I tried autoAlpha, but it fails for me as it applies visibility:inherit; which inherits the hidden from the parent.

 

The best would be if I could toggle a class when the element's opacity is 0 or not 0.

 

I'm looking for a solution which works without labels or events and I need to be able to specify progess and such on the timeline.

 

Any suggestion would be apreciated!

See the Pen aYLXgX by anon (@anon) on CodePen

Link to comment
Share on other sites

16 minutes ago, RolandSoos said:

Well, that seems overkill solution to do that :)

 

I have an animation builder and I need something easy to use, but still robust. autoAlpha would be great, if I could switch it to add/remove class instead of the default behaviour.

 

https://smartslider3.com/city/

 

I guess I don't understand what you're asking for because you've shot down two solutions I've provided. Your requirements are

 

'I'm looking for a solution which works without labels or events and I need to be able to specify progess and such on the timeline."

 

What is it you're looking for?

 

 

  • Like 3
Link to comment
Share on other sites

Your first solution is close enough, so I started to work on that idea as a plugin to GSAP. It creates a custom property: nAutoAlpha which currently adds and removes the class on the parent. The .container should be green when the box visible and grey when it is hidden. That only issue what I have it that when I reset the timeline in "hidden - grey background" state, it does not removes the class on the .container.

See the Pen MVEMGZ by anon (@anon) on CodePen

 

Link to comment
Share on other sites

Based on the official attribute plugin, I made it work. The code adds the current opacity value as an attribute, so I can style when the attribute value is 0. I would be better if I would be able to toggle the attribute 0/1 based on the not-visible/visible state as it might reduce the overhead instead of writing the attribute on every frame.

 

See the Pen oqGKEo?editors=0010 by anon (@anon) on CodePen

 

Link to comment
Share on other sites

Nicely done on the plugin . But I'm curious (and ask this genuinely with no sarcasm or condescension), what problem does adding "visibility: hidden" to an element solve where "opacity: 0" is already in place? Neither collapse the element, so I'm honestly curious. Are you wanting to retain DOM placement but wanting to remove events?

  • Like 1
Link to comment
Share on other sites

User can place several layers on the canvas which overlays each other. They can add timelines on their own which can be triggered with events. For example you have 2 buttons and when you click on the first button, it shows an image. If you click on the second button, it shows a different image at the same place as the first image. But, when you click on the image, each has its own url. If you do not set the opacity:0; image to visibility:hidden, you might open the link of the invisible image. Here is a quick example with the applied visibility:hidden -> https://smartslider3.com/bugs/gsap/2/

 

As the user can create timelines, it is very hard to implement your original solution with the events as the animated properties  are not predestined. There might be opacity change or there might not be. So, I'm always trying to come up something universal :)

Link to comment
Share on other sites

19 minutes ago, RolandSoos said:

User can place several layers on the canvas which overlays each other. They can add timelines on their own which can be triggered with events. For example you have 2 buttons and when you click on the first button, it shows an image. If you click on the second button, it shows a different image at the same place as the first image. But, when you click on the image, each has its own url. If you do not set the opacity:0; image to visibility:hidden, you might open the link of the invisible image. Here is a quick example with the applied visibility:hidden -> https://smartslider3.com/bugs/gsap/2/

 

As the user can create timelines, it is very hard to implement your original solution with the events as the animated properties  are not predestined. There might be opacity change or there might not be. So, I'm always trying to come up something universal :)

 

 

But I'm already seeing 'visibility: hidden' on anything Tweening autoAlpha to 0. But if we're worried about pointer events *during* the tween, why not just set z-index before the Tween to take care of that?

 

See the Pen wmPRNO by sgorneau (@sgorneau) on CodePen

 

Link to comment
Share on other sites

Our software is a visual slider builder. Slider contains several slides. Slides has background image and layers.

We have two animated groups at slide level: slide background transitions in the back and layers in the front.

 

Simple example: https://smartslider3.com/free-image-slider/

 

Here is the real purpose why we need to separate slide backgrounds and layers: https://smartslider3.com/static/


 

  • .slide-layers are visibility:hidden while .slide-layer is visibility:visible which allows to right click and save the .slide-background image. (It needed for several user)
  • .slide-layer are animated by the user, so autoAlpha does not work as inherit value for visibility gets the parent hidden value.
  • Playing with z-index is not an option. User can change the z-index of the layers in the editor, I do not want to play with the defined z-index as it might result in overlay with an other layer which is not intended by the user. (Imagine my previous example with a third image which should overlay both the appearing image. )

Here is a very raw example about a slider structure: 

<div class="canvas" style="width:800px;height:600px;position:relative;">
  <div class="slide-background-container">
    <div class="slide-background slide-active" data-slide="1"></div>
    <div class="slide-background" data-slide="2"></div>
    <div class="slide-background" data-slide="3"></div>
  </div>

  <div class="slide-layers" data-slide="1">
    <div class="slide-layer"></div>
  </div>
  <div class="slide-layers" data-slide="2">
    <div class="slide-layer"></div>
  </div>
  <div class="slide-layers" data-slide="2">
    <div class="slide-layer"></div>
  </div>
</div>

<style>
  .slide-background-container{
    z-index:1;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0; 
  }
  .slide-background{
    position:absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  .slide-background.slide-active{
    left: 0;
  }
  
  .slide-layers{
    position:absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    visibility: hidden;
  }
  
  .slide-layers.slide-active{
    left: 0;
  }
  
  .slide-layer{
    position: absolute;
  }
  
  .slide-layers > *{
   visibility: visible; 
  }
</style>

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...