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!