TweenMax + Unbounce

  • 25 August 2017
  • 2 replies
  • 35 views

Hello

Recently i’ve been really enjoying coding using TweenMax.
But now I want to integrate with unbounce.

Here is my LP
http://nz.aamplify.co.nz/scroll-animation-testing/
On scroll, when the blue line hits the green line, the red box is meant to move.
If you open up inspector in your browser, you can see that some of the properties on the object change, but the object itself doesn’t change.

I was wondering if anyone had done this before or am I the first one? 🙂
And if so, if anyone could explain to me why my object isn’t doing anything, but it’s inline properties are changing?

Thanks


2 replies

Userlevel 7
Badge +1

Hey Eugene!

I’m going to loop in @Hristian and @Noah on this, they’ll have the most insight – but they’ll also probably just find this potential integration pretty fascinating.

In the meantime, could you send over some other pages that you’ve seen use TweenMax? I’m curious to see it in action.

Cheers!

Hey Jess!

TweenMax is an awesome little plugin that allows you to do almost everything when it comes to animating.
You use it like this
TweenMax.to(‘name of object to move’, 2, {x:-200px,y:-200px});
Here, when the page loads, the name of the object to move moves by -200px on the x axis and -200px on the y access.
Super simple script, with lots of power and very lightweight. We combine this with simple scrollmagic to add effects to a webpage on scroll.

Im also looking at implementing a canvas on an unbounce page that I can then manipulate using tweenmax.

Here are some examples!
http://scrollmagic.io/examples/basic/simple_tweening.html (scrollmagic + Tweenmax)

http://www.adidas.co.uk/ace_17
http://www.publicis90.com/#/publicis90




https://www.epicurrence.com/


Cheers! 🙂

Reply