greenanimation

For my experience using 3d animations, what I do is set the perspective property of the wrapper of the desired animated element. For your case it would be the cube element. (So set the perspective style property of its wrapper to ~600px) Than for the animation it would work as expected, that is - using rotationX, rotationY for the cube element would also rotate the inner divs. Peace

If you wanna go hardcore you can use SVG filters for motion blur ect. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter This is something I think could be really usefull (:

Since your timelines are not paused by default, they will play regardless of the context. I suggest the following: Create a 'global' object of the currently playing timeline. On every press, get the timeline of the desired animation (with no autoplay), if the previous animation finished, play the timeline, if not, just wait. This is the semi-edited codepen ( I just edited the forward logic) var currentSlide = 0; var allImages = document.getElementsByClassName('galleryImage'); var totalImages = allImages.length; // nextImage function nextImage() { var slideTl = new TimelineMax({repeat:0, ease:Power1.easeOut,paused:true}); currentSlide++; // Maybe move this to the tl onComplete function. if (currentSlide >= totalImages) { currentSlide = 0; slideTl.set(allImages[totalImages - 1], {zIndex:0}); slideTl.set(allImages[currentSlide], {zIndex:1}); slideTl.to(allImages[currentSlide], 0.5, {autoAlpha:1}); slideTl.set(allImages[totalImages - 1], {autoAlpha:0}); } else { slideTl.set(allImages[currentSlide - 1], {zIndex:0}); slideTl.set(allImages[currentSlide], {zIndex:1}); slideTl.to(allImages[currentSlide], 0.5, {autoAlpha:1}); slideTl.set(allImages[currentSlide - 1], {autoAlpha:0}); } return slideTl; } // prevImage function prevImage() { var slideTl = new TimelineMax({repeat:0, ease:Power1.easeOut,paused:true}); if (currentSlide == 0) { slideTl.set(allImages[currentSlide], {zIndex:0}); slideTl.set(allImages[totalImages - 1], {zIndex:1}); slideTl.to(allImages[totalImages - 1], 0.5, {autoAlpha:1}); slideTl.set(allImages[currentSlide], {autoAlpha:0}); currentSlide = totalImages; } else { slideTl.set(allImages[currentSlide], {zIndex:0}); slideTl.set(allImages[currentSlide - 1], {zIndex:1}); slideTl.to(allImages[currentSlide - 1], 0.5, {autoAlpha:1}); slideTl.set(allImages[currentSlide], {autoAlpha:0}); } currentSlide--; return slideTl } // Gallery event listeners let prevTimeline = new TimelineMax(); document.getElementById('next').addEventListener('click', ()=>{ if (prevTimeline.isActive()){ console.log('do overlap logic'); }else{ let tlToPlay = nextImage(); prevTimeline = tlToPlay; tlToPlay.play(); } }, false); document.getElementById('prev').addEventListener('click', prevImage, false);

I built this helper function that can encapsulate all mentioned above, might be helpful to someone function polygonClipToArray(polygonString){ return polygonString.match(/\d+/g).map(Number); } /** * * @param element- Element to animate * @param fromClip- e.g 'polygon(0 100%, 100% 100%, 0 100%, 0 100%)' * @param toClip - e.g ''polygon(0 100%, 100% 100%, 0 100%, 0 100%)' * @param duration - time to preform the animation * @returns {TimelineMax} */ function clipPathAnimation(element,fromClip,toClip,duration){ let clipPathTimeline = new TimelineMax(); let fromPath = polygonClipToArray(fromClip); let toPath = polygonClipToArray(toClip); let clipPath = function(){ let valuesString = ''; fromPath.forEach((element,index)=>{ let postFix = (index % 2 === 1 && index !== fromPath.length -1)? ',':''; valuesString += `${element.toString()}%${postFix}` }); TweenMax.set(element, {clipPath:`polygon(${valuesString})`}); }; clipPathTimeline .to(fromPath,duration,{endArray:toPath,onUpdate:clipPath}) return clipPathTimeline; } Used like this: let timeline = new TimelineMax(); const FIRST_MASK_CLIPS = [ 'polygon(0 100%, 100% 100%, 0 100%, 0 100%)','polygon(0 100%, 100% 100%, 0 0, 0 0)','polygon(0 100%, 50% 100%, 50% 0, 0 0)']; timeline .add( clipPathAnimation(masks[0],FIRST_MASK_CLIPS[0],FIRST_MASK_CLIPS[1],17/25), 1 +6/25); .add( clipPathAnimation(masks[0],FIRST_MASK_CLIPS[1],FIRST_MASK_CLIPS[2],1 + 9/25),1 + 23/25);

Hello guys - I'm a new GSAP developer and I've encountered a problem that seemed pretty easy at first glance, but since I've spent way too much time on it , I decided to post it on the form as it may also help some other users. I'm trying to create an animated border similar to the 'draw' border example here : What would be the correct way to approach this problem? So far I've tried to embed the transition CSS on the element.(didnt work out) I'm also aware of the SVG plug-in but I'm not sure if this would be a correct use for it. Would love to get some insights ! Thanks- Idan

Hey Rafael! Just sent you an email

Hello Guys! We are an e-commerce company, and we are producing videos for online stores (usually dynamic videos with adaptive content in real time). Up until now we were using After Effects for our video templates, but now we want to move to Greensock animations instead. The videos contain product images, transitions, text effects etc We are looking for a freelancer who can "translate" such videos into a Greensock animation. (we will then convert those animations to mp4) This is a video template, which means we need to be able to replace the text and the images easily. It is a recurring task because we are adding new templates from time to time, so long term relationship can be great for us. Thanks