Jump to content
Search Community

Timeline events not working with Framer.js

pixelbeat 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 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()

# 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

Link to comment
Share on other sites

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). 
Link to comment
Share on other sites

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) ->
	dragMe.x = slider.knob.x + 16
# 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)



Screen Shot 2017-07-21 at 4.00.15 PM.png

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...