Jump to content
Search Community

Tweening other libraries API

venn test
Moderator Tag

Go to solution Solved by OSUblake,

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 am wondering if Greensock is able to tween an API from a different library?


I am using Framer.js with my mobile work but using the GSAP animation library.


In Framer you can tween the x value (relative), or the screenFrame x value (absolute value).

I have attached an image for the API.

https://framerjs.com/docs/#layer.layer (under screenFrame)



The screenFrame API:

element.screenFrame = {
  x: 400

Instead of tweening the x value which is relative, I am trying to tween the screen frame absolute value.

TweenMax.to(element, 1, {x: 0});
TweenMax.to(element, 1, {screenFrame:{x: 0}}); <-- It is not working?

It is because my JS/GSAP syntax isn't correct?



Link to comment
Share on other sites

  • Solution

Hey @venn,


This is a common issue when trying to tween other libraries. You're trying to tween a property on another object, so it should be like this.

TweenMax.to(element.screenFrame, 1, {x: 0});

This can be annoying because while these objects belong to the same element, you have to target them separately, requiring you to create separate tweens for each object. The solution to this is to create your own plugin. I brought this up in another post.



The Pixi.js plugin is the best example that I've seen, and is what I would use for a template.


  • Like 3
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...