Jump to content
Search Community

Overlapping alternating opacitiy

Iamattamai 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've been struggling with this for a few hours and thought I might reach out for some expert help.

I have two images for which I want to alternate opacity back and forth between the two but not in a binary way - a little softer in the transition.

I'm using the snippet below, but it results in a transition period between the two elements when neither element has full opacity and it reveals the background layer.

I would like to create an overlap of the tweens such that there is a gradual transition maintaining full opacity in combination yet maintaining the general frequency - not speeding up or slowing down.

I've tried tweaking the values but can't seem to find the right combination.

 

t4 = new TimelineMax();
t4.to("#closed",.15,{opacity:0, delay: .3, repeat: 20, repeatDelay: .15, yoyo: true},0)
.to("#open",.15,{opacity:1, delay: .3, repeat: 20, repeatDelay: .15, yoyo: true},.0)

Link to comment
Share on other sites

I'm not sure I totally understand the effect you're after, but your code does look like it alternates between things properly. But if your objects are on top of each other, you can just fade the TOP one in and out (no need to do anything to the other one). See what I mean? Here's a demo with your original solution as well as an alternate with them on top of each other: 

See the Pen ba21de611a64c80765c74e7c03f31415?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help at all? 

Link to comment
Share on other sites

Sorry for my lack of clarity and thanks for your prompt response as always.

The images are on top of each other, but the bottom one is of slightly larger size and I wanted to hide the excess of the lower part while the upper is visible.

See my codepen below - and BTW, thanks for creating one so I could examine how its done.

See the Pen ydMJQG by iamattamai (@iamattamai) on CodePen

Note the "double chin" created by the underlying image - I would like to eliminate that in a way that doesn't result in a transparency that would show any underlying images.

Link to comment
Share on other sites

 

 

Your SVG is damaged. For example, the last lines are cryptic :


0.371421-0.62024 0.173411-1.13829 0.325327-1.15121 0.33759-0.04655 0.044176 0.08876 0.01786<div class="container">3 0.61555-0.119698z" style="fill:#1b221c;stroke-width:.05638608"/>
  </g>
</svg>

 

  • Like 2
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...