This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jacek Stryk
Posted Jan 06 - Read on Facebook

Is there a way to swap a layer image on the layer click event? And animate it? I want to change the layer's image on click to a different image and control the way to new images appears. Something like:

Layer1 = new Layer({x:0, y:0, width:1440, height:660, image:"images/img1.png"})

Layer1.states.add({
image2: { image: "images/img2.png" },
image3: { image: "images/img3.png" }
})

Layer1.states.animationOptions = {
curve: "spring(500,12,0)"
}

Layer1.on(Events.Click, function() {
Layer1.states.next();

---== OR ==---

switch between two layers in an animated way?

Layer1 = new Layer({x:0, y:0, width:1440, height:660, image:"images/img1.png"})
Layer2 = new Layer({x:0, y:0, width:1440, height:660, image:"images/img2.png"})

3 Comments

Rafael Puyana

I wrote this class today for switching between layers on tap or by using a time interval. It is not ready for making transitions, so you might have have to tweak it a bit.

https://gist.github.com/rfpuyana/ecf13705ea70b59fb28e

Benjamin Den Boer

Hey Jacek, as of now it would be easier for you to fade between two layers with different images.

Rafael Puyana

Benjamin. Can you suggest a link to the documentation or to an example?

Read the entire post on Facebook