kempo

thanks guys - sorted

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;

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

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

That helped a lot thank you

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.

Great thanks

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

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!

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!

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); }