framer Timeline events not working with Framer.js

[pixelbeat 0 Likes (Newbie)]

I successfully implemented a native slider from Framer to control the timeline, instead of using jQuery and the jQuery UI slider library.

 

My main problem emerged when I realized that the timeline events [onComplete, onProgress...] were not trigger at all. 

 

Here is the prototype.

 

Sadly, I don't know how to isolate the bug or recreate this outside of Framer, but essentially my code goes as follows.

 

init = new TimelineMax({onComplete:updateSlider})
# hSection is an Framer layer
init.from(hSection, .5, {opacity: 0, y:"+=200", ease:Power3.easeInOut}, 0)
# footer.children is an Framer layer with elements within
init.staggerFrom(footer.children, .5, {opacity: 0, y:"+=25", ease:Power3.easeInOut}, -.15)

# Here is the slider component
slider = new SliderComponent
	width: Screen.width / 2
	height: 20

# Here is the slider event that I used to drag and affect the timeline progress. This works like a charm.
slider.on "change:value", (event, ui)->
	init.progress(ui.value ).pause()
	return

# Here is the function that needs to be triggered the moment that timeline is completed. Nothing happens.
updateSlider = () ->
	print init.progress()

 

 

Can you help me out?

  

CoffeeScript code

See the Pen by kyIiK (@kyIiK) on CodePen

[pixelbeat 0 Likes (Newbie)]

Also I tried 'eventCallback' and didn't work either.

 

init.eventCallback("onUpdate", updateSlider)

 

[GreenSock 8,117 Likes (Superhero)]

Hm, it's difficult to troubleshoot blind, but I'll offer a few thoughts: 

• It looks like all you're doing in your updateSlider() is to print the progress. Is that similar to a console.log() or something? Is it not printing? Is that why you think it's not working?
• Have you tried declaring your updateSlider function BEFORE you reference it in the timelines? 
• There is no "onProgress" - I think you mean onUpdate. 

And a few questions: 

1. Are you getting any errors? If so, what exactly does it say? 
2. What makes you think that the onComplete and onUpdate callbacks aren't working at all? How are you diagnosing that? (I'm not disagreeing with your diagnosis - I'm just trying to understand the evidence you're looking at). 

[pixelbeat 0 Likes (Newbie)]

Thanks for replying. The callbacks were working, but IDK if coffeescript needed the function to be declare that way.

With your reply I successfully fixed the problem and found that I can 'debug' the callbacks by using:

 

init = new TimelineMax({repeat: -1, yoyo: true, onUpdate:print, onUpdateParams:["Animation running"]})

 

Declaring the updateSlider function before the reference FIXED the problem.

 

# Working version

slider.on "change:value", (event, ui) ->
	init.progress(ui.value)
	dragMe.x = slider.knob.x + 16
	return
    
# Declare the function BEFORE the timeline.
    
updateSlider = () ->
	slider.value = init.progress()

init = new TimelineMax({repeat: -1, yoyo: true, onUpdate:updateSlider})

# This works as well

init.eventCallback("onUpdate", updateSlider)

 

Thanks!

[GreenSock 8,117 Likes (Superhero)]

Excellent! Glad things are working now. Thanks for reporting back. 

 

Happy tweening!