[React Gatsby]

thanks guys - sorted

[React Gatsby]

I'm trying to get GSAP working in my React Gatsby project. I've made a simple test following @Rodrigo guide https://greensock.com/react

 

Here is my component - no animation and no errors either

 

import { TweenLite } from "gsap/TweenLite";

class Messages extends React.Component {
  constructor(props) {
    super(props);
    this.myElement = null;
    this.myTween = null;
  }

  componentDidMount() {
    this.myTween = TweenLite.to(this.myElement, 1, { x: 100, y: 100 });
  }

  render() {
    return (
      <div ref={div => (this.myElement = div)}>
        <img src={require("../images/logo.png")} width="50" />
      </div>
    );
  }
}

export default Messages;

 

[Learning SVG animation]

Great thanks Carl. I shall look into drawSVG and SVG masks.

 

Cheers

[Learning SVG animation]

Hello!

 

I want to get into SVG animation, I've been making banners with TweenMax / Light for a while.

 

I have a new banner to make, I could do it all without SVG but thought it might be a good to use it as a way to learn SVG animation.

 

First off, here is the storyboard for the part of the animation that I'd build.

 

 

The yellow line starts from nothing, comes across the banner from the left at an angle then opens up to reveal the blue panel with yellow top and bottom borders.

 

Basically I'd like to know where to start, what tools I should use and if this animation is suited to SVG animation.

 

Also, any pointers to good learning resources would be a bonus!

 

Cheers

[tweenmax scroller]

That helped a lot thank you

[tweenmax scroller]

I'm working on a banner using TweenMax, I want to scroll 5 divs form right to left and display 3 at a time (except right at the beginning and right at the end). It is hard to explain without looking at the result. You will see that only 2 divs are currently displayed at once.

See the Pen XdyybQ by jakepeg (@jakepeg) on CodePen

[continue only if not last repeat]

Great thanks

[continue only if not last repeat]

Hello!
 
I want to stop playing a timeline at a certain point if on the last repeat, for example..
 

var TL1 = new TimelineMax({repeat:1, repeatDelay:2.5});
TL1.set("#banner", {visibility:"visible"})
.from('#copy1', 1, {top:-20, scale: 0, ease: Power4.easeInOut})
.to('#hero', 1, {top: 250, ease: Power4.easeInOut},'-=1')
.from('#group-logos', 1, {top:-15, scale: 0, ease: Power4.easeInOut})
.from('#cta2', 1, {top:40, scale: 0, ease: Elastic.easeOut.config(1, 0.75)},'+=0.5')
.from('#hero2', 1, {left: 300, ease: Power4.easeInOut},'+=1'); // don't do this if on the last repeat

[multiple circles]

Hi Diaco, thanks, that's much more elegant than my code. I will study and refine for my needs and update my codepen (in the morning - late now here in Australia)

 

Cheers!

[multiple circles]

I'm looking for a way programmatically creating randomly placed and randomly sized circles. I started to do it manually as you can see from the codepen. It would be much better to do it programmatically but I need a bit of pointing in the right direction!

See the Pen pyyrVR by jakepeg (@jakepeg) on CodePen

[sizmek carousel loses click event after first loop]

I have a banner that has a carousel where each slide has a different clickthrough url. Clickthroughs are added to divs with addEvent. It all seems to work until the carousel loops back to the beginning, when the clickthrough don't work anymore. Here is the js..
 

(function checkInit() {
try {
EB.isInitialized() ? onInit() : EB.addEventListener(EBG.EventName.EB_INITIALIZED, onInit())
} catch (a) {
onInit();
}})();
 
function onInit() {
animate();
} 
 
function animate(){
var delayed = 1.75;
// TweenMax.to(".intro", 1, {y:-250, delay:delayed,ease:Power4.easeIn});
}
 
// Support IE events
function addEvent(evnt, elem, func) {
if (elem.addEventListener){  // W3C DOM
elem.addEventListener(evnt,func,false);
}else if(elem.attachEvent){ // IE DOM
elem.attachEvent("on"+evnt, func);
}else{ // No much to do
     elem[evnt] = func;
  }
}
 
// Events
 
addEvent("click", document.getElementById("next"), function(){
    next();
});
 
addEvent("click", document.getElementById("prev"), function(){
    prev();
});
 
addEvent("click", document.getElementById("r1"), function(){
    EB.clickthrough("url1");
});
 
addEvent("click", document.getElementById("r2"), function(){
    EB.clickthrough("url2");
});
 
addEvent("click", document.getElementById("r3"), function(){
    EB.clickthrough("url3");
});
 
addEvent("click", document.getElementById("r4"), function(){
    EB.clickthrough("url4"); 
});
 
addEvent("click", document.getElementById("r5"), function(){
    EB.clickthrough("url5"); 
});
 
 
var isRunning = false; // Flag to stop carousel spam
var autoRotate = setInterval(next, 5000); // Automatic carousel rotation
 
function prev(){
    clearInterval(autoRotate);
    if(isRunning == false){
        isRunning = true;
        var parentElement = document.getElementById("carousel");
        parentElement.insertBefore(parentElement.childNodes[3],parentElement.childNodes[0]);
        TweenMax.to(".carousel", 0.0, {x:"-=300"});
        TweenMax.to(".item", 0.5, {x:"+=300"});
        setTimeout(function(){
            isRunning = false;
        }, 500);
    }
    autoRotate = setInterval(next, 5000); // Restart the auto-rotate
}
 
function next(){
    clearInterval(autoRotate);
    var parentElement = document.getElementById("carousel");
    if(isRunning == false){
        isRunning = true;
        TweenMax.to(".carousel", 0.5, {x:"-=300"});
        TweenMax.delayedCall(0.5, function(){
            TweenMax.to(".item", 0.0, {x:"+=300"});
            var cln = parentElement.childNodes[0].cloneNode(true);
            parentElement.appendChild(cln);
            parentElement.removeChild(parentElement.childNodes[0]);
            isRunning = false;
        });
    }
    autoRotate = setInterval(next, 5000);
}