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

What is Framer? Join the Community
Return to index
Arthur Dagard
Posted Dec 12 - Read on Facebook

Hi Guys,I'm stock since 2days with this :/
I've created a list of tracks. I want to roll over the track (SelectTracks) and hightlight the background (Tracks). It works with one track but if I have many (like 7 in this case) everytime it highlights the last one (even if I'm mouseover the others)
Any idea ?

document.body.style.cursor = "auto"

# This imports all the layers for "playlist-player" into playlistPlayerLayers
playlistPlayerLayers = Framer.Importer.load "imported/playlist-player"

#This define the screenzone
ScreenAll = new Layer({
x:49,
y:98,
width:966,
height:539,
backgroundColor:"rgba(0, 234, 0, 0)",
})

#this define the Entire PlaylistBar
NavigationPlaylistBarre = new Layer({
x:0
y:0,
width:325,
height:543,
backgroundColor:"rgba(0, 0, 0, 0.6)",
superLayer:ScreenAll,
})

#this define the zone in which the playlist can scroll
ConteneurTracks = new Layer({
width:325,
height:380,
y:72,
superLayer:NavigationPlaylistBarre
backgroundColor: "rgba(0, 0, 0, 0)",
})
ConteneurTracks.scroll = true

#this create the list
for i in [0..6]
Tracks = new Layer({
x:0,
width:323,
height:45,
y:i*46,
backgroundColor: "rgba(37, 205, 152, 1)",
opacity:0,
superLayer:ConteneurTracks,
})

# Show which track you're mouseover
SelectTracks = new Layer({
x:0,
width:323,
height:45,
y:i*46,
backgroundColor: "rgba(37, 0, 0, 0)",
superLayer:ConteneurTracks,
})

Tracks.states.add
stateA: {opacity:1},
stateB: {opacity:0},
Tracks.states.animationOptions =
curve: "spring(400,40,0)"
SelectTracks.on Events.MouseOver, ->
Tracks.states.next("stateA")
SelectTracks.on Events.MouseOut, ->
Tracks.states.next("stateB")

9 Comments

Andreas Wahlström

try changing Tracks.states.next("stateA") to this.states.next("stateA") and same for mouseout

Arthur Dagard

Tracks.states.add
stateA: {opacity:1},
stateB: {opacity:0},
Tracks.states.animationOptions =
curve: "spring(400,40,0)"
SelectTracks.on Events.MouseOver, ->
this.states.next("stateA")
SelectTracks.on Events.MouseOut, ->
this.states.next("stateB")

Andreas Wahlström it doesn't work :/

Arthur Dagard

note that I have the same problems with a layer "checkmark" that I load from my Sketch file. Instead of being on every Tracks, it just appears on the last one

Andrew Vy

You have to apply the States to each state, right now, Staye is being overidden everytime the for loop occurs.

Arthur Dagard

Andrew Vy I'm not sure to understand.

Arthur Dagard

Andrew Vy have you any example ?

Andreas Wahlström

Arthur Dagard try adding an empty object above the "for loop". eg. tracks = {}. Then use tracks[i] instead of Tracks inside the loop

Doug Proctor

states.next() doesn't take arguments I don't think. If you want to change to a specific state use state.switch("stateB")

Arthur Dagard

Doug Proctor thx

Read the entire post on Facebook