MZBS

Now is perfectly clear. About the sections I was trying to do the same but not with sections but with 2 timelines but with sections is much better. Thank you so much!

Ok so: lets see this other example to understand the amplitude effect that I wanted to achieve on both lines: https://codepen.io/MZBS/pen/dybKyxB If you see in this example the characters are moving asynchronously left and right. My problem now is that with your example all the letters are moving the same way at the same time and with my example what is wrong is that the lines are not doing the same animation and what I need is that the letters have to move asynchronously but this asynchronous have to be the same on both lines to be able to match and see it like it would be the same line. So, my question is how can I get this: get this but with 2 text lines in the same absolute position (one would be with stroke and the other without in order to do the mask) doing this same animation. And to understand it even better. I have this 2 lines: https://codepen.io/MZBS/pen/xxKzbOe How can I put that line 2 (with stroke) does exactly the same animation as line 1. Now if you see are different with same timeline.

Hello Zack, is like that but with the amplitude working on the characters, not on the words to create like an horizontal yoyo / accordion effect for each letter. So in your example all the words are moving at the same speed. What I want is the same effect I actually have here: https://codepen.io/MZBS/pen/pozVpYG, so you see that the "letter-spacing" is changing on the animation. I don't know if is more clear now. Thanks! MZ.

Hello, I just bought the Business license to be able to use all the plugins (I am loving GreenSock so far) and I have a problem with Split Text. I have 4 lines of text. 2 on the front and 2 on the back (two with stroke and another two without stroke in the same position) and an element in the middle to create a "fake mask" effect (circle). I added the SplitText effect and is working fine. My problem is that I need that the lines over the circle (stroke line) and the lines on the back (only some words with stroke) were sync at the same time (speed). https://codepen.io/MZBS/pen/pozVpYG I was thinking to put each line on a different timeline with a delay but I don't know how to make this work. You can see the mask effect without the animation if you change amplitude to 0. Thank you!

Thank you OSUblake !

Thank you Zack, I was working with a new version with a different way to do this (by adding or removing classes to hide and show) and not that related with GSAP (without using timelines) and now is working perfectly. I know is still "too much code" for a menu and I would try to find how to make this cleaner but have to find the way to related each menu element with their own elements on the map. Here the code that is working fine: $('.interactivo .default-container .menu ul li a.menu-citizen').each( function(){ $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); $('.smart-citizen .elements').removeClass('on'); $('.elements').removeClass('off'); $('.elements').addClass('on'); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); $('.elements').removeClass('on'); $('.elements').addClass('off'); $('.smart-citizen .elements').removeClass('off'); $('.smart-citizen .elements').addClass('on'); } }); }); $('.interactivo .default-container .menu ul li a.menu-water').each( function(){ $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); $('.smart-water .elements').removeClass('on'); $('.elements').removeClass('off'); $('.elements').addClass('on'); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); $('.elements').removeClass('on'); $('.elements').addClass('off'); $('.smart-water .elements').removeClass('off'); $('.smart-water .elements').addClass('on'); } }); }); $('.interactivo .default-container .menu ul li a.menu-mobility').each( function(){ $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); $('.smart-mobilty .elements').removeClass('on'); $('.elements').removeClass('off'); $('.elements').addClass('on'); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); $('.elements').removeClass('on'); $('.elements').addClass('off'); $('.smart-mobility .elements').removeClass('off'); $('.smart-mobility .elements').addClass('on'); } }); }); $('.interactivo .default-container .menu ul li a.menu-green').each( function(){ $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); $('.smart-green .elements').removeClass('on'); $('.elements').removeClass('off'); $('.elements').addClass('on'); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); $('.elements').removeClass('on'); $('.elements').addClass('off'); $('.smart-green .elements').removeClass('off'); $('.smart-green .elements').addClass('on'); } }); }); $('.interactivo .default-container .menu ul li a.menu-efficiency').each( function(){ $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); $('.smart-efficiency .elements').removeClass('on'); $('.elements').removeClass('off'); $('.elements').addClass('on'); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); $('.elements').removeClass('on'); $('.elements').addClass('off'); $('.smart-efficiency .elements').removeClass('off'); $('.smart-efficiency .elements').addClass('on'); } }); }); $('.interactivo .default-container .menu ul li a.menu-safety').each( function(){ $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); $('.smart-safety .elements').removeClass('on'); $('.elements').removeClass('off'); $('.elements').addClass('on'); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); $('.elements').removeClass('on'); $('.elements').addClass('off'); $('.smart-safety .elements').removeClass('off'); $('.smart-safety .elements').addClass('on'); } }); }); But you are right this is not related anymore with GSAP with this way to do it so thank you anyways for your time! Thanks. MZ.

Hello Zack, I know is a lot of code but each element has its own options and that's why I was creating this like that. Your example is perfect if I want to hide / show all the elements on the map but that's not the goal. So to understand better what I have, here is a little explanation: - I have 6 types of categories of the elements in my map that by default all are shown on the map. - My menu works like a filter so you can only hide / show the elements of the category you clicked. This is working perfectly now. - And if I click first to a category and then to a different category what I need is to display only the elements of that new category that is working fine also but only the first time. So at the end for each category I need special indications: hide all the elements, show only the elements of the category. Then if I click to a different category would be the same, hide all the elements and show only of the category I clicked. And if I click to the same button then I see all the elements of all the categories in the map. So the animation is the same but the classes are different for each element.

Hello, I have a map with different elements and I have created a menu so you can show/hide the element types you want. This is the code: $('.interactivo .default-container .menu ul li a.menu-citizen').each( function(){ this.tl2 = new TimelineMax({paused:true}); this.tl2.to(".elements", 0, {autoAlpha:1}); this.tl2.to(".smart-green .elements, .smart-mobility .elements, .smart-water .elements, .smart-safety .elements, .smart-efficiency .elements", 0, {autoAlpha:0}); $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); this.tl2.reverse(); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); this.tl2.play(); } }); }); $('.interactivo .default-container .menu ul li a.menu-water').each( function(){ this.tl3 = new TimelineMax({paused:true}); this.tl3.to(".elements", 0, {autoAlpha:1}); this.tl3.to(".smart-citizen .elements, .smart-green .elements, .smart-mobility .elements, .smart-safety .elements, .smart-efficiency .elements", 0, {autoAlpha:0}); $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); this.tl3.reverse(); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); this.tl3.play(); } }); }); $('.interactivo .default-container .menu ul li a.menu-mobility').each( function(){ this.tl4 = new TimelineMax({paused:true}); this.tl4.to(".elements", 0, {autoAlpha:1}); this.tl4.to(".smart-citizen .elements, .smart-green .elements, .smart-water .elements, .smart-safety .elements, .smart-efficiency .elements", 0, {autoAlpha:0}); $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); this.tl4.reverse(); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); this.tl4.play(); } }); }); $('.interactivo .default-container .menu ul li a.menu-green').each( function(){ this.tl5 = new TimelineMax({paused:true}); this.tl5.to(".elements", 0, {autoAlpha:1}); this.tl5.to(".smart-citizen .elements, .smart-mobility .elements, .smart-water .elements, .smart-safety .elements, .smart-efficiency .elements", 0, {autoAlpha:0}); $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); this.tl5.reverse(); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); this.tl5.play(); } }); }); $('.interactivo .default-container .menu ul li a.menu-efficiency').each( function(){ this.tl6 = new TimelineMax({paused:true}); this.tl6.to(".elements", 0, {autoAlpha:1}); this.tl6.to(".smart-citizen .elements, .smart-green .elements, .smart-mobility .elements, .smart-water .elements, .smart-safety .elements", 0, {autoAlpha:0}); $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); this.tl6.reverse(); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); this.tl6.play(); } }); }); $('.interactivo .default-container .menu ul li a.menu-safety').each( function(){ this.tl7 = new TimelineMax({paused:true}); this.tl7.to(".elements", 0, {autoAlpha:1}); this.tl7.to(".smart-citizen .elements, .smart-green .elements, .smart-mobility .elements, .smart-water .elements, .smart-efficiency .elements", 0, {autoAlpha:0}); $(this).click(function(){ if( $(this).hasClass('active') ){ $(this).removeClass('active'); this.tl7.reverse(); }else{ $('.interactivo .default-container .menu ul li a').removeClass('active'); $(this).addClass('active'); this.tl7.play(); } }); }); So as you can see for each element what I do is onclick: - Show all the elements of the map (so if you left any other activated menu item it doesn't matter) - Hide all the elements except the ones of the clicked item. - Add active class to the menu item. When I am doing it on each element individually (active / deactivate) is working perfectly infinitely. Also if I click on Element 1, then Element 2, then Element 3 etc is also showing and hiding my elements perfectly but only the first time. My problem is that when I want to repeat this action, so click on each element again (1, 2, 3...3,2,1) then the action of show all the elements again and then hide is not working. Is just working the addClass/removeClass. In my demo now I only have 1 item for Element 2 and one item for Element 3. The others have to hide/show everything. https://codepen.io/MZBS/project/editor/XEkLMr Any idea what I am doing wrong? Thanks!!

Thank you Mikel, this is working perfectly !! MZ.

Hello, I have this animation that is working perfectly when the window has a width over 1900. if ($(window).width() > 1900) { var controller = new ScrollMagic.Controller(); $(".facebook").each(function() { var tl = new TimelineMax(); var child = $(this).find(".facebook-doble-mockup .facebook-mockup:last-of-type"); tl.to(child, 1, { y: -250, ease: Linear.easeNone }); var scene = new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.4, duration: "100%" }) .setTween(tl) .addTo(controller); $(window).resize(function() { if ($(window).width() < 1900) { tl.kill(); } else { } }); }); } What i want is that if the window is resized on bigger screens less than 1900 to delete the animation and if is again over 1900 to play again the animation. I tried with the tl.kill but is not doing anything. I see in this forums different questions regarding this but I can't find the right way to do this with this animation. Thank you! MZ.

Perfect, thank you!

What if you are doing a personal project or portfolio website just for fun. Is it necessary the license? Or only for projects you are going to get money from? I am learning now GSAP and would love to try it on a real project soon but for now I am just testing on personal projects. Thanks!

Is it possible to have this follow mouse animation used over an iframe? Seems like is working perfectly with any div but not over iframes. https://codepen.io/MZBS/pen/gOYXXGX Thanks!

Thank you @Jonathan, now with the .html method is working perfectly to wait to load content until it's clicked on. But I will post for sure a Codepen if I have any other question and also I will show you all the interactive with the animations I am doing. Thanks!

I found this way that works: $('.element_1').each( function(){ $(this).wrap('<div class="wrapper">'); $(this).parent().prepend('<span class="close"></span>'); TweenMax.set( $(this).parent().find('.close') , {autoAlpha:0},'+=2' ); this.tl = new TimelineMax({paused:true, onReverseComplete: removeActive, onReverseCompleteParams: [$(this)] }); this.tl.to(".element-container_1", 0.8, {css:{marginLeft:60}, ease:Power2.easeOut}); this.tl.to(".animacion", 0.8, {css:{marginLeft:-40}, ease:Power2.easeOut},'-=0.3'); this.tl.to(".mapita img", 1, {right:"-900px", ease:Power2.easeInOut},'-=1.2'); this.tl.to(".default-container", 0.8, {autoAlpha:0},'-=1.5'); this.tl.to(".mapa-on", 0.8, {autoAlpha:0},'-=1'); this.tl.to(".mapa-off", 0.8, {autoAlpha:1},'-=1.3'); this.tl.to(".elements", 0.6, {autoAlpha:0},'-=1.4'); this.tl.to(".active_element_1", 0.8, {autoAlpha:1},'-=0.5'); $(this).click( function(){ // Any others in active state should go back to inactive $('.element_1').not( $(this) ).each( function(){ $(this).removeClass('active'); this.tl.reverse(); }); // If this is active, reverse ... if not make it active if( $(this).hasClass('active') ){ this.tl.reverse(); TweenMax.to( $(this).parent().find('.close') , 0.6 , {autoAlpha:0} ); }else{ $(this).addClass('active'); TweenMax.to( $(this).parent().find('.close') , 0.6 , {delay: 0.8, autoAlpha:1}); this.tl.play(); $('.animacion_1').html('<video class="video" width="320" height="240" autoplay loop muted playsinline><source src="../video/element_1.webm" type="video/webm"><source src="../video/element_1.mp4" type="video/mp4"><source src="../video/element_1.ogg" type="video/ogg"></video>'); this.tl.to(".animacion .video", 0.6, {autoAlpha:1},'-=0.7'); } }); var elScope = this; $(this).parent().find('.close').click( function(){ TweenMax.to( $(this).parent().find('.close') , 0.6 , {autoAlpha:0} ); elScope.tl.reverse(); setTimeout(function() { $(".animacion_1 video").remove(); }, 1000); }) }); function removeActive(el){ el.removeClass('active'); } In this case what I am doing is that if the class is active (animation is done) then I add HTML to my code with the element that is with a bigger size (in this case a video), so I just pre-load for each element the texts and I add the video for each like this with .html function. Then when the animation is close I remove that HTML. I don't know if this is the best way to do this but it works. What do you think? Thanks!

Hello, I am creating an interactive map and for each item there is an animation with a modal with information (more than 30). I have an script like this: $('.element_1').each( function(){ $(this).wrap('<div class="wrapper">'); $(this).parent().prepend('<span class="close"></span>'); TweenMax.set( $(this).parent().find('.close') , {autoAlpha:0},'+=2' ); this.tl = new TimelineMax({paused:true, onReverseComplete: removeActive, onReverseCompleteParams: [$(this)] }); this.tl.to(".element-container_1", 0.8, {css:{marginLeft:60}, ease:Power2.easeOut}); this.tl.to(".animacion", 0.8, {css:{marginLeft:-40}, ease:Power2.easeOut},'-=0.3'); this.tl.to(".mapita img", 1, {right:"-900px", ease:Power2.easeInOut},'-=1.2'); this.tl.to(".default-container", 0.8, {autoAlpha:0},'-=1.5'); this.tl.to(".mapa-on", 0.8, {autoAlpha:0},'-=1'); this.tl.to(".mapa-off", 0.8, {autoAlpha:1},'-=1.3'); this.tl.to(".elements", 0.6, {autoAlpha:0},'-=1.4'); this.tl.to(".active_element_1", 0.8, {autoAlpha:1},'-=0.5'); this.tl.to(".animacion .video", 0.6, {autoAlpha:1},'-=0.7'); $(this).click( function(){ // Any others in active state should go back to inactive $('.element_1').not( $(this) ).each( function(){ $(this).removeClass('active'); this.tl.reverse(); }); // If this is active, reverse ... if not make it active if( $(this).hasClass('active') ){ this.tl.reverse(); TweenMax.to( $(this).parent().find('.close') , 0.6 , {autoAlpha:0} ); }else{ $(this).addClass('active'); TweenMax.to( $(this).parent().find('.close') , 0.6 , {delay: 0.8, autoAlpha:1}); this.tl.play(); } }); var elScope = this; $(this).parent().find('.close').click( function(){ TweenMax.to( $(this).parent().find('.close') , 0.6 , {autoAlpha:0} ); elScope.tl.reverse(); }) }); function removeActive(el){ el.removeClass('active'); } The class .element_container_1 is the one that is showing me all the DIV with all the information in this case for item 1. Now I have all the HTML in the same file so the page loads all the content of the items of the map from the beginning. What I want, for performance purposes, is to only load each content when the animation is active and have all the HTML for each content separately in different URLs so you only load the item you want to see. I tried to add a load function and then the play but I am not really sure how to make this work: $('.element_container_1').load('element_content_1.html',function(){ I tried also this for example but is not loading the content: $(this).addClass('active'); TweenMax.to( $(this).parent().find('.close') , 0.6 , {delay: 0.8, autoAlpha:1}); this.tl.play(); $( "#element_1" ).load( "../interactivo/element_1.html #element_container_1" ); Any idea how can I add this type of ajax calls when the animation is active? Thanks!!

Perfect, now is working like this: TweenMax.to( $(this).parent().find('.close') , 1 , {delay: 0.9, autoAlpha:1}); Thanks!

Hello, make sense. Now is working almost well done but I had to change all my code to approach this problem this way. Let me show you how I am now: So I have this and is working almost okay. The thing is that this new "close" that is being created for each element appears too early comparing to the animation of the .element container. I need to see the close button later. I tried to add a delay with the '+=2' but is not doing anything. I am not sure where to add it so the element is added to the .element-container at the right time and not before is on screen. $('.elements').each( function(){ $(this).wrap('<div class="wrapper">'); $(this).parent().prepend('<span class="close">X</span>'); TweenMax.set( $(this).parent().find('.close') , {autoAlpha:0},'+=2' ); this.tl = new TimelineMax({paused:true, onReverseComplete: removeActive, onReverseCompleteParams: [$(this)] }); this.tl.to(".element-container", 0.8, {css:{marginLeft:60}, ease:Power2.easeOut}); this.tl.to(".default-container", 0.8, {autoAlpha:0},'-=1'); $(this).click( function(){ // Any others in active state should go back to inactive $('.elements').not( $(this) ).each( function(){ $(this).removeClass('active'); this.tl.reverse(); }); // If this is active, reverse ... if not make it active if( $(this).hasClass('active') ){ this.tl.reverse(); TweenMax.to( $(this).parent().find('.close') , 1 , {autoAlpha:0},'+=2' ); }else{ $(this).addClass('active'); TweenMax.to( $(this).parent().find('.close') , 1 , {autoAlpha:1},'+=2'); this.tl.play(); } }); var elScope = this; $(this).parent().find('.close').click( function(){ TweenMax.to( $(this).parent().find('.close') , 1 , {autoAlpha:0},'+=2' ); elScope.tl.reverse(); }) }); function removeActive(el){ el.removeClass('active'); } Also now I have a new problem to solve let me explain: So imagine that I have a map with different .elements you can click. For each element there is one .element-container that have to be opened with different information. With this code I see that all .element.containers are being opened. To be more clear about this here is the HTML you can see when the website is online: <div class="interactivo"> <div class="interactivo-content"> <div class="mapa"> <span class="mapita"><img src="../img/mapa.png"></span> <div class="container-element"> <div class="wrapper"> <span class="close" style="visibility: hidden; opacity: 0;">X</span> <div class="elements element_1"></div> </div> <div class="element-container" style="margin-left: -1914px;">content1</div> </div> <div class="container-element"> <div class="wrapper"> <span class="close" style="visibility: hidden; opacity: 0;">X</span> <div class="elements element_2"></div> </div> <div class="element-container" style="margin-left: -1914px;">content2</div> </div> </div> <div class="default-container" style="visibility: inherit; opacity: 1;"> <div class="logo"><img src="../img/logo@2x.png"></div> </div> </div> </div> So as you can see I have: 1. One map. 2. Over the map I have all the container-elements that is a wrap that includes the wrapper that is being created with the code you are helping me (is not by default) with the close and the element and then the element-container that by default is outside of the window that will includes all the information of that element. 3. With the animation what I want to be able to do is to show the element-container that are inside EACH container-element but not all of them like at the moment because now the code is showing me ALL the element-containers of the website at the same time. So I am not very sure how can I solve this so the animation shows only the right container on each time. EDIT: Actually the animation is giving me problems when I click to the 2nd element. I think if all the elements are the same like in your example works perfectly but when the elements are differents (with same-type animations) then this is giving problems. To be easier to understand here is the Codepen of the project: https://codepen.io/MZBS/project/editor/ZvgWaz# Thank you so much!

Great, thank you Barule. Is working perfectly with this .elements. Now I have another problem. When the element container is on screen there is also a "close" button on it, so you can choose to click on the element or click on the close button on the element-container. But if you click on the close button and then click on the element is going to do again the "reverse" animation as is still with the "active" class. So what I am trying to do is to remove also the active class on the .elements when I click to the .close button inside the element so to reset all the animation in order to start again from the beginning if I click to an element again. I don't know if this is the right way to do it. So I am trying to do this adding the .removeClass to elements in the close function but is not working... $('.elements').each( function(){ this.tl = new TimelineMax({paused:true}); this.tl.to(".element-container", 0.8, {css:{marginLeft:60}, ease:Power2.easeOut}); this.tl.to(".default-container", 0.8, {autoAlpha:0},'-=1'); $(this).click( function(){ // Any others in active state should go back to inactive $('.elements').not( $(this) ).each( function(){ $(this).removeClass('active'); this.tl.reverse(); }); // If this is active, reverse ... if not make it active if( $(this).hasClass('active') ){ $(this).removeClass('active'); this.tl.reverse(); }else{ $(this).addClass('active'); this.tl.play(); } }); }); $('.close').each( function(){ this.tl = new TimelineMax({paused:true}); this.tl.to(".element-container", 0.8, {css:{marginLeft:-5000}, ease:Power2.easeIn}); this.tl.to(".default-container", 0.8, {autoAlpha:1},'-=1'); $(this).click( function(){ // Any others in active state should go back to inactive $('.close').not( $(this) ).each( function(){ $(this).removeClass('active'); $('.elements').removeClass('active'); this.tl.reverse(); }); // If this is active, reverse ... if not make it active if( $(this).hasClass('active') ){ $(this).removeClass('active'); $('.elements').removeClass('active'); this.tl.reverse(); }else{ $(this).addClass('active'); this.tl.play(); } }); }); Thanks a lot for the fast help!

Hello, I am doing and interactive map with different elements and I want on click on each element to do different animations and to show the content. I am starting and i found the way with this code to play the animation: var Anim = new TimelineMax({paused:true}); Anim.to(".element-container", 0.8, {css:{marginLeft:60}, ease:Power2.easeOut}); Anim.to(".default-container", 0.8, {autoAlpha:0},'-=1'); Anim.set('.elements', {className: '+=element-active'},'-=1'); $(".elements").click(function(){Anim.play() }); So I want to use the same element to reverse the animation If you click again on it so I was trying (because I don't know a different way) to add a class "element-active" and then create another animation with the class element-active onclick to do the reverse: var AnimBack = new TimelineMax({paused:true}); AnimBack.to(".element-container", 0.8, {css:{marginLeft:-5000}, ease:Power2.easeIn}); AnimBack.to(".default-container", 0.8, {autoAlpha:1},'-=1'); AnimBack.set('.elements', {className: '-=element-active'},'-=1'); $(".element-active").click(function(){AnimBack.play() }); But is not doing anything with this. Any idea how can I do this? Thanks!