Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Overlapping alternating opacitiy

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

Thanks for the suggestion Mikel. 

I tried what you are doing using the 6 paths in my drawings but getting nothing - see attached codepen.

What am I missing?

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


Link to comment
Share on other sites

Hi @Iamattamai,


Your SVG is pretty complex. It is difficult to localize and evaluate the individual objects. I just do not have the time.


Here is a simple version.
The objects that should be the morph result must be set in the CSS visibility: hidden.


See the Pen NZpazN by mikeK (@mikeK) on CodePen


Happy tweening ...




  • Like 4
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"/>


  • Like 2
Link to comment
Share on other sites

That explains a lot.

Thank you for your generous sharing of your time Mykel.

I'll continue to troubleshoot.

Link to comment
Share on other sites


That came right out of Inkscape, but I might have cut and pasted haphazardly.

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.