iuscare

Hi Jack, thanks for the reply. Exactly the reason why I've asked. Want to honor the effort you put in serving those plugins. I am the only one who is working on the repro. If in some circumstances this is going to change and somebody else will gain access to that repro, I am going to regenerate the token, so the token in the repro will be invalid. Thanks for your confirmation and your work on gsap ?

Hi there, I am new to the greensock membership family and just want to get sure, that storing my .npmrc auth token in a privat repro is allowed or are there other ways you are preferring? The app gets deployed with buddy in a docker container, so the container needs access to download the bonus plugins, which come with the membership. As I said the repro is and will remain private, so theoretically the auth token should not leak into public. Is it that way allowed? All the best!

Thanks @GreenSock for swapping in GSAP instead of anime. I forked the pen and replaced it with GSAP version3, transformed it into a Babel ES6 class and added the ability to set the config parameters right from the html template via data-attributes. There might be room for some additional improvements, e.g. exchanging helper classes with built in gsap methods, but I thought I share, what I have up to now, in case someone runs into the same situation. ? https://codepen.io/iuscare/pen/wvzbjXe

Hi @mikel & @GreenSock, spent another evening digging in and I think I am almost there. So far, many thanks for the help I`ve found in this forum. While other forums like stackoverflow unfairly stamps questions as stupid very fast, it seems, like everyone in this community is always polite and keen. I tried to get my head around my issue and I think it does not make much sense to keep the fading rate of the staggered items themselves consistence. If every item would have a fading rate of just 0.1ms, the speed between the staggering items has to be very fast. Basically I try to build something like a list, which lists all departments and offers of our NGO. Since this list is big (>25 array elements) and part of an intro animation (built with gsap aswell btw ;-)) , this animation should not take too long. So I am fine with Jacks first suggestion. If you have another opinion about my idea and best practice, just let me know. I have just one last struggle: My last array element is not a single word, it has multiple words. SplitText splits up every word into a single one, wraps its class around it and animates every word of it alone, which absolutely makes sense. Anyway, is there an easy way, to animate the whole array element at the end of the animation and not just every word of it? I`ve updated my example a little bit, maybe the solution is easy and fast implemented on it: https://codepen.io/iuscare/pen/QXQKEW All the best Pascal!

Hey Jack, thank you so much for coming back to me. Your provided example is very close and I can already work with it. But you are right with your second thought you`ve thrown in: I am looking more into a way to keep the fading animations consistent and to accelerate the duration of the text staying opaque. Sorry, if I did not explain it good enough. May you give me some some hints or a working example (which would be suuuper awesome), where I can see what's going on to solve this, too? You'll find our NGO in your greensock membership soon Kind Regards Pascal

Hi there, I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom. But I seem unable to find out two things: (1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagger objects should start slow and should speed up over time. (2) The last item of the stagger Timeline should remain. I am looping the timeline on codepen so you can get a better sense. But on production side the timeline should only play once and the last item (This text should stay) should remain. (3) Does this way of implementation weigh heavy regarding performance, especially when I end up adding even more words to my array (e.g. 23-26)? Are there any things, I could improve? Would be great if I can some tips from you awesome guys! Have a good day! Pascal

Hi @OSUblake coming back to this thread. I am building a website with gsap, where I just dropped jQuery in favor of imrpoving es6 skills. Just read your opinion that toggling css class names is not a performant way and that you are storing them in an object or a variable. May you give us an example how you do this for a simple open/close menu button? All the best!

Hello @Sahil, many many apologizes for my late reply. I was not at home the last few days. You are right, I looked up the docs. I did not use mouseenter and mouseleave cause I thought they were pure jQuery related, but they are not obviously. Thank you so much for that hint. So they are safe and ready for use in production just because of you two guys Thanks!

Hey @PointC always to the rescue, thank you so much for giving me this input. I got it working. One problem persisted, because vanilla mouseover and mouseleave events also fire when hovering over a child element of the button, which is not intended, of course. I managed to get around by setting the pointer-events to none for those child elements and hope I won't cross browser incompatibility issues. Anyway thank you so much for your help!

Hi there, I know this might not be a pure gsap related issue, but I hope someone can point me into the right direction. I want to avoid the use of jQuery and instead want to use pure javascript with es6 syntax. Therefore I created a button.js file, in which I want to create the module for my button animation powered by gsap. The jQuery version already works, so I simply have to translate this version into an es6 module but I am failing and keep getting "Cannot tween a null target". Obviously I am doing something wrong in the es6 syntax, but I can't figured it out Here is my button.js – codepen throws the same error: import TweenMax from 'gsap'; export default class Button { constructor() { this.btns = document.querySelectorAll('.tg-btn'); this.init(); } init() { for(let i = 0, max = this.btns.length; i < max; i++) { let el = this.btns[i]; console.log(el); console.log(i); let a = el.querySelector('.inner1'); let b = el.querySelector('.inner2'); let c = el.querySelector('.inner3'); let d = el.querySelector('.inner4'); let e = el.querySelector('.inner5'); let m = 0; let n = 50; let o = "center"; let p = null; let tl = new TimelineMax({paused: true}); var t = tl .set(el,{willChange:"transform"}) .set([e[i], d[i]], {opacity: 0,width: 1,right: "center" === o ? -n / 2 : -n - 20}) .set(e[i], {rotationZ: "45deg"}) .set(d[i], {rotationZ: "-45deg"}) .to(a[i], .2, {opacity: 0,left: 15,ease: Sine.easeIn}) .to(c[i], .3, {right: "center" === o ? -n / 2 : -n - 20,ease: Expo.easeOut}, .1) .to(c[i], .5, {width: n,ease: Expo.easeOut}, .3) .to([e[i], d[i]], .2, {opacity: 1,ease: Sine.easeOut}, .35) .to(e[i], .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) .to(d[i], .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) // to right animation tl.addLabel("midpoint", .8), tl.add(function() { tl.stop() }, "midpoint"), tl.set(a[i], {left: -15}, "midpoint0.31"), tl.to([c[i], d[i], e[i]], .3, {right: -600,ease: Expo.easeIn}, "midpoint0.31"), tl.to(a[i], .3, {opacity: 1,ease: Sine.easeOut}, "midpoint0.5"), tl.to(a[i], .3, {left: 0,ease: Sine.easeOut}, "midpoint0.5"), tl.stop(); //el.animation = t; el.data('someTimeline', t); //create the event handler el.addEventListener('mouseover', function(){ alert("trigger"); t.play(); }); el.addEventListener('mouseout', function(){ t.reverse(); }); } } destroy() { window.removeEventListener('mouseover'); } } new Button();

Hi there, I just saw this animation and was wondering if this or something similar is possible to build with greensock. I mean, for sure it would be somehow possible, but at the moment I do not know how to create this split width animation on the image. Normally I would try it with different divs, which animate their width von 0 to 100%. But with a background-image I do not know how to realize such an effect. Can anyone give me a hint? https://dribbble.com/shots/3561148-Cover-Animation

Hello, I have a expanding searchbar by using TimelineMax. If you click on the icon, the categories should scale away and the searchbar should expand to 100% width. When click anywhere on the body element while the searchbar is opened, the timeline should play in reverse state. This already works as intended. My Problem is that the timeline reverse is being applied with every click on the body element, even if the searchbar is not expanded plus the timeline is being interrupted and being resetted when clicking on the body element while the timeline is being played. I tried to solve this issues to give the search container a .data value open true or false, but somehow it will not work as intended. This may not be an explicit greensock probleme but rather a javascript logic problem, but I'd be very grateful if anyone may help me out. Timeline Code: (function($) { var $irpsearch = $('#irp-newssearch-container'), $irpsearchinput = $('#irp-searchform-input'), $search_icon = $('.irp-news-search-icon'), $btn_container = $('.irp-filter-buttons'), $filter_btn = $('.filter-btn'), $search_seperator = $('.irp-search-seperator'), $body = $('body'); var openSearchAnimation = new TimelineMax({ paused: true }) openSearchAnimation .staggerTo($filter_btn, .5, {scale: 0.7 ,opacity: 0,ease: Back.easeInOut},-0.1) .set($btn_container,{'display': 'none'}) .to($search_seperator, .3, {opacity: 0, ease: Expo.easeOut}, '-=0.6') .to($search_icon, .5, {backgroundColor:"#ffffff", ease: Power0.easeNone}, '-=1.0') .to($irpsearch, 1.0, {width: '100%', ease: Power3.easeOut}, '-=0.1'); openSearch = function () { $irpsearch.data('open', true); openSearchAnimation.play(); $irpsearchinput.focus(); return false; }, closeSearch = function() { $irpsearch.data('open', false); openSearchAnimation.reverse(0); } $irpsearch.on('click', function(e) { e.stopPropagation(); if (!$irpsearch.data('open')) { openSearch(); /* Body Click */ $body.off('click').on('click', function(e) { closeSearch(); }); /* Escape Hide */ $( document ).on( 'keydown', function ( e ) { if ( e.keyCode === 27 ) closeSearch(); } }); } else { if ($irpsearchinput.val() === '') { closeSearch(); return false; } } }); })(jQuery) Codepen: codepen.io/anon/pen/YQqQWm All the best Pascal

Hey Jonathan, thanks for coming back to me and your explanation. I just removed that line as you advised. By the way, thanks for sharing your original post with us. It saved me a lot of time. Don't even know if I had been capable to realize this animation without your code. Cheers

Hello PointC, yes that makes clearly sense and it already works. I've updated the codepen demo. I implemented your advise on every tweening action, expect on the .set(el,{willChange:"transform"}) line. Otherwise I got an error. Is this intended and is the code clean enough in regard of performance? All the best and already thank you so much! Greetings are also contained in the codepen demo now

Hello, sorry, I just forgot the pen, here you go: http://codepen.io/iuscare/pen/dpExzQ You can already see, what I am trying to achieve I'm happy to hear from you guys