runBackwards and function values

[TravisShipley]

It seems that the runBackwards property cannot accept a function value. In fact if you try giving it a function value it will always evaluate to true.

Perhaps there is something I'm missing. I just wanted some clarification on whether this is intended behaviour or a bug.

 

For example: 

gsap.to(".box", {
  runBackwards: () => false,
  x: 300
});

This will run backwards.

See the Pen QWEZKvJ by travisshipley (@travisshipley) on CodePen

[GreenSock]

That's correct. Most special properties aren't intended to be function-based. I can't really think of a great use case for using a function for runBackwards - can you explain? 

[TravisShipley]

Mine is sort of a strange, specific use case that probably isn't well suited to the gsap general audience. I am animating the faces of a rubiks cube with ScrollTrigger. When I scroll up I want the animation to play in reverse. That's simple enough, however, at the end of each turn of the cube I reset the rotation and the actual stickers are moved so that the state of the cube is always the same each time I ask it to rotate a face. 

 

I was able to achieve what I wanted by using a fromTo with function values that checks the direction of the scrollTrigger and then inverts the start and end values. I use onComplete and onReverseComplete to invalidate the tween so that it resets the rotation props on each play through. It would have been more straight forward to just check the scroll direction and flip the runBackwards flag, but I doubt many others have needed that ability.

 

More useful though would be a list of which properties do or do not accept function-based values. I wasn't able to find that.

 

I'd also like to mention that it's really amazing how many features and options you guys have built into gsap. Incredible work.

[ZachSaucier]

Why not create a new tween instead of doing all of this invalidation and state manipulation? 

[TravisShipley]

I attempted that at one point, and perhaps there's a clever way to get that solution to work, but I wasn't able to figure it out for my use case.

 

Part of the problem is related to the way I'm doing rotations on the 26 three.js objects that make up the cube. It's MUCH simpler if the cubes that make up the puzzle have a rotation of (0,0,0) at the start of every move (simpler for me to understand at least).

 

You can see the work in progress here www.solvethecube.ca

It's just a little vanity project, but it makes heavy use of gsap. 

[ZachSaucier]

You can still keep a rotation of 0,0,0 each time with a new tween. I'm a bit confused how using the same tween helps. 

 

Neat project!

[TravisShipley]

Using the same tween probably isn't important. I just wasn't able to find a good way to have a tween replace itself with an inverted copy. I could probably emit an event from each onComplete and then rebuild the timeline.

 

Keeping the rotation at (0,0,0) was more of an issue with three.js and handling objects in 3d space. It's the reason for all the state manipulation.

[Carl]

That's a fantastic demo. I've followed a few online rubik's solve tutorials in the past. This clearly has potential to be the best. Please post back in this thread when you have it all working. Would love to check it out and share with folks. Geat job!