Jump to content
Search Community

Gsap Animate CC Pharma banner with ISI

aaronmaxdesign test
Moderator Tag

Recommended Posts

When I built pharma banners, if they were done with Animate I avoided gsap, and used create.js tweens instead, since that's what Animate is already loading. The scrolling ISI would be html, in its own div, above the canvas. Ideally that would use system fonts, but more often, we had to have brand fonts with specific weights and sizes determined not by the design team, but by the legal department. So we would make the text an image.

Are you trying to animate the isi scroller?

  • Like 2
Link to comment
Share on other sites

yeah. I was using the scrollto function for the isi but couldn't get it to pause. used gsap.pauseall() that worked in the past but is no longer taking. 
The banners that I'm working with have links in the isi so I still have to keep it HTML. I wish I could just do an image.  Do you happen for have some source files I can take a look at?

 

Link to comment
Share on other sites

  • 2 weeks later...

Hey all, we have done a lot of these with the ResponsiveAds platform instead of Adobe. Check these out if interested.

They all use the Greensock library.  // scroll starts after the video

https://app2.responsiveads.com/creatives/5e88bd0232a6979f3900047d/template-preview?color=lightgrey#/responsive-all

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

ok so I got it to work

 

First frame 

 

var i=1;

this.box.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
Enabler.exit('Background Exit');
}

 

 

Last frame
 

this.stop();
isiStart();

function isiStart() {
    for(var i=1; i<1000; i++) {
        TweenMax.to("#container",220, {scrollTo:{y:i},});    
    }
}

window.$holder.addEventListener("mouseover", stopScroll);
function stopScroll() {
    TweenMax.pauseAll();
    console.log("over");
}

window.$holder.addEventListener("mouseout", startScroll);
function startScroll() {
    isiStart();
    console.log("out");
}

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