sensenel

Thank you for your time! I was just hoping it would be possible to provide asynchronous DOM elements (not in the sense of fetching whole files or images) via Promises to a timeline without having to install a complete AJAX framework this time. Thanks again!

Hi Blake, thank you for your quick response! I knew my request was very general - im sorry for that Thanks for your example! I handle my request the same way to load new HTML content on click. In my case, with the new content there are new elements added and I want to use this in a timeline. In said timeline are DOM elements which are already present (index) but new ones should be added, e.g. like this: // Elements from async loaded content: elementsNewContent = [$('.no1'), $('.no2'), $('.no3')]; timeline.fromTo(elVar1, 1, {top: elVar2}, {top: 0, 'width': '100%', 'height': '420px', ease: Power3.easeOut}, "marker") .fromTo(anotherVar, 1.7, {y: 600}, {y: 150, ease: Power4.easeOut}, "marker") .fromTo(anotherVar, 0.7, {alpha: 0}, {alpha: 1, ease: Power4.easeIn}, "marker=0.3") .staggerFromTo(elementsNewContent, 1, {y: 150}, {y: 0}, 0.1); i have a array with links, on these links i registered an eventlistener, if one of those i clicked i want to assemble a timeline combined out of already existing elements from my index and some new one coming from my async loaded content, like this: headerArr.forEach((el, i) => { el.addEventListener('click', (elVar2) => { function myTl() { let elementsNewContent = [$('.no1'), $('.no2'), $('.no3')]; return ... timeline ... // defined as mentioned above } myTl().then(() => { timeline.restart() }) }); }); tried already so many variations, im just lost right now ... i guess i may misunderstand some of this logic in general, right? Thank you very much for your help, i really appreciate!

Hello, a few years ago I worked a lot with GSAP, so 2017/2018. I'm currently building a smaller project where I want to load content via ajax, there are elements in it that I want to pick up and put in a timeline for a transition and I'm getting desperate ^^. I had done something similar a few years ago, but barba.js was involved - its own challenge - but this is overkill and there are promises and async await - so I thought. On the net and here in the forum is not very much to find on this and the little I have tried everything without success. Sorry I don't have a CodePen example yet, but and am now at the point that I have to ask: Does this work at all? Thanks a lot

looking for something similar after some real brainf**k ... your stuff and ideas are just awesome - every single time! Thank you so much Diaco!!

HI Sahil, Thanks for the feedback ^^ I just want to know for sure and this is realy awesome! (again! ) Right now the amount of tweens start to make me think - how much can it take and performance issues will occur ...? At the same time i want to have it as much compact as possible, therefore im happy for every single line of code i can save thanks again and have a nice weekend!

just out of curiosity I had the same issue and end up with this var headerSplitText = new SplitText("#headerStart", {type:"chars"}); headerArray = shuffleArray(headerSplitText.chars); // pass to an function for scrumbling my string and return it as array //lot of other tweens before etc //then this: .staggerFromTo(headerArray, 0.5, { opacity: 0, color: "#2962ff" }, { opacity: 1, color: "#fff", repeat: 2 }, 0.1, "start+=2", allDone, [headerSplitText]) // followed by even more tweens ... function allDone(element) { element.revert(); } now at the very end of my tween i pass thru my origin splitText object as parameter for the allDone function - i was surprised that this works is it ok to leave it just like that? for having allDone ready also for other strings and not just this particular one What do you guys think? thanks a lot

Hi Carl, thank you very much for your help! Ok, is see, i was sticking too hard on that transform matrix3d property - very nice! I realy appreciate Thanks again

Hi folks, unfortunately i ran into some weird matrix3d behaviour and i realy hope somebody can help me out ^^ i tried to minimize my problems in this pen to some real basic level. Please first hover with your mouse over those color boxes, because this transition is exactly what im trying to achieve when a certain button has been clicked - after clicking my "do-it" button now you'll see the whole mess i'm in right now ... Basicly my first question before this pen was just: how to shortcut this final z-axis movement of every layer? - because within a timeline the parameter for movement on the x - as on y - axis is just e.g. "... {y: 123} ... " etc - so having this whole matrix3d syntax around seems very unusual? As i was looking for a solution i found this https://greensock.com/css3 At the point where it is about 3d transforms with that grid - exactly that is what iam looking for; unfortunately i wasnt able to catch some code via dev-tools in my browser OK, another thing i noticed in my project where this detail belongs to: if i click the "do-it" again after i reversed it, the whole animation not just play's once, it plays twice? And it adds one more iteration to the count of repeatings every time i reverse and play it again until i reload the whole thing ... I tried already things like kill(), killAll() or clear() ... but it seems i missed something else? Thank you for any help!

Hi Craig, i've loaded TweenMax - although in my example i used TimeLineLite ... WAIT! OMG i see it myself in my own example above! ... i forget to merge the second tween with "." aarrrrg ... im sooo sorry guys! haha "from is not defined" makes sense now hey, gotta say although with this syntax error it animated my elements somehow, GSAP is tough stuff! Respect!! Thank you so much for your help!!

Hi! thanks for your quick reply! Im sorry, i thought when it is at first about if or if not possible i'd save some time for now ^^ umpf ok, but good to know - i'll play around a bit before i might come back with a codepen Thanks for your advice!

Hi there, im new to the GSAP and first of all i want to thank the devs for their great work! Sadly i seem to have a problem bringing together the CSSRulePlugin with a TimeLine-Object; actually i can guess the answer: these both are not supposed to work together, right? Thats what i have for example (for the principle i hope it is ok posting without codepen): var tl = new TimelineLite(); var blueStripePseudo = CSSRulePlugin.getRule('#cropContainer:after'), backWhitePseudo = CSSRulePlugin.getRule("#bckgrImgPartialContainer:after"); tl.from(blueStripePseudo, 1, {cssRule: {transform: "scaleY(5)"}}) from(backWhitePseudo, 2, { cssRule: { width: "100%", ease:Sine.easeInOut}}); If it is possible in general and im doing just something wrong i'd grateful if somebody could enlighten me otherwise i would appreciate if somebody could just confirm ^^ Thank you for your time! regards