Banner Tweenmax troubles

[LarsFinley]

So, I'm totally new here and probably haven't figured out the search option well enough so please don't kill me

 

Well I have a banner image that is 1800px wide 200px tall. I want it to scroll right to left through a container that is 600px wide by 200px tall. I also want to to repeat when it finishes its path through the container. I have it to the point where it sliding in and getting to the end of the 600px wide container and then it restarts at the beginning. 

 

thanks for your help,

 

Complete Newbie.

 

 

also this is in React.js, dont know if that matters.

 

 

here is my code....

 

The id="pic1" is referring to the picture in my css file

 

<div className="cd-scrolling-bg cd-color-2">

<div className="jumbotron">

<div className="row">

<div className="col-md-6">

<h2> A brief personal History </h2>

</div>

<div id="pic1" className="col-md-6">

</div>

</div>

</div>

</div>

 

this is my TweenMax script...

 

<script>

    TweenMax.staggerFrom(['#pic1'], 8, {ease: Power0.easeInOut, opacity: 1, x: 1500, repeat: -1}, .5);

</script>

 

and here is the pic1 css...

 

#pic1 {

  display: inline-flex;

  overflow: hidden;

  position: center;

  height: 200px;

  background-image: url('./picture/pic1.jpg');

}

 

[OSUblake]

Hi @LarsFinley

 

Well React matters, but forget that for a moment because what you're doing looks pretty vanilla. However, I'm not sure what you're having trouble with. Are you trying to do something like this?

See the Pen 8ec75ed344d36f51f0d37a9a42d3d3ba?editors=0010 by osublake (@osublake) on CodePen

 

If you not, can you make a CodePen so we can get a better idea of what's going on? 

[LarsFinley]

Yes, super simliar to your example. However when I tried it like your example it only rendered 600px of my image.

[OSUblake]

Not sure. Try using img elements instead. I'm using a 1920 x 980 image and it seems to be working fine.

 

Click the fork button in the top-right corner and modify my example to match up with your code so we can better idea of what's going on.

See the Pen b9c285fc3987284aa674c78e61464a9e?editors=0010 by osublake (@osublake) on CodePen

[LarsFinley]

Thanks for your help OSUblake! I ended up watching some tutorials and hacked it all together. Here is my final solution..

 

var tl = new TimelineMax({ paused: true, repeat: -1 });

 

tl.fromTo("#pic1", 30, { ease: Power0.easeNone, x: -300}, { ease: Power0.easeNone, x: -2200});

 

$('.jumbocolor').mouseenter(function() {

  tl.play();

});

 

$('.jumbocolor').mouseleave(function() {

  tl.stop();

});

[OSUblake]

Oh, I see what you're doing now. I thought you were trying to do a carousel effect. That's why it's a good idea to always provide a demo even if the issue may seem simple. But glad you got it working!

[Jonathan]

This Topic is now being moved to the GSAP Banner Forum, since it is banner related