Dipscom

Right, I see, you've copied my example and tried to adapt it to using SplitText.
 
You are using an outdated syntax and are missing a few little bits. Have a look at the SplitText docs as well. You will see there is already a ton of functionality there.
 
I recommend you also read the get started section in the site here so you can be familiar with the current GSAP syntax.
 
Finally, below is your code refactored to achieve a pleasant animation. The key points there are: Add a class to each split letter, creating a "dictionary" of tweens, storing an "index" reference of the dictionary entry on each letter as a data-attribute and checking to see if the element hovered over has said dictionary reference and if the tween is playing
 
new SplitText(".wtg", {charsClass: "letter"}); const element = document.querySelector('.wtg'); const letters = gsap.utils.toArray(".letter"); const tweens = {}; element.addEventListener('mouseover', onMouseOver); letters.forEach((letter, index) => { tweens[index] = gsap.to(letter, {yPercent: -50, yoyo:true, repeat:1, paused: true}); letter.dataset.tween = index; }) function onMouseOver(event) { const trg = event.target; if(trg.dataset.tween) { tween = tweens[trg.dataset.tween]; if (!gsap.isTweening(trg)) { tween.play(0); } } }  

Oh and to actually answer your question:
 
You would set a CSS variable on the attribute you want to animate and tween the CSS variable.
 
// In your CSS you'd set something like: /* div:before { transform: translateX(var(--move-x)); } */ // In your JS you'd then: gsap.to("div", { "--move-x": "33px" });  

Hey Refinery!
 
You are just overthinking it a bit. All you need is the following:
 
gsap.from(".list__item", { opacity: 0, duration: 0.5, x: 50, stagger: 0.5 }); What you are doing in your code is creating an individual Tween for each of the list items, not a timeline that contains all the items. As each tween is independent and only contains one item, there is nothing to stagger and they all paly at the same time.

Hey jiggy1965!
 
That is happening because you're calling the extenal function instead of asigning it to the onUpdate handler.
 
// This calls the function once and assign its return value to onUpdate: { onUpdate: myFunction() } // This assigns myFunction as the method to call whenever onUpdate runs: { onUpdate: myFunction } Now, on your case, if you want to pass some values to the function being called onUpdate, all you need to do is wrap your function into an empty function like:
 
tl.to(value, {startvalue:targetvalue, duration:2, ease: Power1.easeOut, onUpdate: () => updateslider(value.startvalue) });  
Happy tweening!

Hey Shutt90,
 
Is there a reason why you aren't using a timeline in this case? That's exactly what timelines are for, to queue tweens and control them easily. You can do so much with a simple timeline, you'd be amazed at the simplicity of it.
 
See here an example of the many ways you could organise your code using a timeline based on the code you provided:
 
const getProjects = document.querySelectorAll('.projects_container-outer'); function tweenIn (target) { const overlay = target.querySelector('.projects_container-overlay'); const text = target.querySelector('.text'); const tl = gsap.timeline({ paused: true }); tl.to(overlay, { width: '100%', opacity: 100, duration: 0.3, backgroundColor: 'rgba(94, 59, 83, 0.8)' }); tl.from(text, { opacity: 0, x: 150, duration: 0.3 }); return tl; } getProjects.forEach(project => { const animation = tweenIn(project); project.addEventListener('mouseenter', function(e) { animation.play(); }); project.addEventListener('mouseleave', function(e) { animation.reverse(); }); });  

I've had a poke around your repository. What Rodrigo suggested earlier on: using a local copy of the script from your statics folder seem to do the trick. You forgot to convert some of your code to account for that, the IconButton.vue was still referring to the .tgz version. Changing that to use the static folder version has made the error go away.
 
The test pass now when I run it. There are other errors logged but I think they are other things for you to take care of, the test itself reports as passed.
 
Another thing to mention is that I see you have been using Yarn. I didn't, I don't have it installed and wasn't going to bother downloading it, sorry. So I used NPM. I don't know if that will be an issue or not, thought I would mention here.

Hi, thanks for the demo. It does help.
 
Nothing is jumping out at me right now, I don't see any glaring issues with your code or the context in which is written. It could be that I am just not seeing the actual issue but I would say you should definitely wait until the DOMContentLoaded has fired before running splitText - what might be happening is your content is shifting at the same time that SplitText is setting up and it might be messing the DOM structure.
 
On this last screenshot you have sent, it looks like every word is displaying as a block. As much as I refresh here, I don't see the issue you are reporting.
 
Now I have to ask you to not link to a copy of SplitText as you have done in the CodePen. SplitText is part of the Club Greensock, it shouldn't be shared around and it shouldn't be posted on the open web. You can use all Club Greensock's plugins on CodePen for free anyway. Please remove that link and replace it with the one available on CodePen.
 
You should also try to use GSAP's new syntax, it's more concise and full of other goodies.

Hey VOLTARII_MATTI,
 
Again, welcome to the forums!
 
You got your CSS rules mixed up. If you want the canvas element to scroll up when scrollTrigger unpins it, you cannot have it with a position:fixed in CSS, else, it will stay fixed. You need to use position:absolute.
 
As for your question on the OBJ, Zach is the law here when he says the forums are focused on GSAP but we are allowed to give away pointers towards more information and/or solutions. You can have textures mapped into an OBJ file yes. But, if you are asking that, you probably want to learn how to do that. I would suggest you do a quick look up on exporting files from Blender, there will be tutorials out there showing how to export assets and their textures for the web.
 

If I may interject:
 
The issue here is to do with how efficient Vue is when updating the nodes. By default Vue will only re-render what has been changed. In this case, only the inner text is being changed. If you look at the state of your application with Vue dev tools, I bet you can see the string updating correctly.
 
No animation can be triggered because there is alreay a bunch of other things inside your element - all the divs that SplitText created in order to do its magic.
 
What is missing is for you for manually tell Vue to re-render the whole element you need and then, you can apply a new SplitText.
 
The easiest way to achieve that (and the recommended as far as I know) is to add a unique key to the element and change the key as you update the text to be displayed. See here a simple example:
 

See the Pen yLajpVE by dipscom (@dipscom) on CodePen

Hi ,
 
Welcome to the forums!
 
The .stagger() family of methods have a onCompleteAll parameter that is after the position parameter like:
 
.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* )
 
See the full description in the docs: https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/staggerFrom/
 
The way you have it setup, the onComplete call will be invoked at the completion of each of the elements being tweened. Not at the end of all tweens.
 
You will want your code to be:
tl.staggerFrom(chars, 2, { opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin:"0% 50% -50", ease: g.Back }, 0.01, "+=0", doStuff);

What exactly is it that you want to do?
 
To answer the question of: "How can I execute a Javascript function in my timeline". A dive into the docs will show you several ways:
 
https://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/add/
https://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/addCallback/
https://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/call/
https://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/eventCallback/
https://greensock.com/docs/#/HTML5/GSAP/TweenLite/delayedCall/
 
From looking at this Typed.js I imagine you could do something like:
var tl = new TimelineMax() tl.to(...) tl.call(function(){ Typed.new('.element', {strings: ["First sentence.", "Second sentence."],typeSpeed: 0}) } ) ); tl.to(...) Worth mentioning that there are loads of ways to achieve a type writer effect using just GSAP, if you're interested.
 
https://greensock.com/forums/topic/11361-typewriter-effect/
 
Does any of that help?
 

I know you have said your final animation is quite complex but I don't know how different one animation is from the other.
 
So, the way I would tackle this, would be to have a function building the individual timelines to each section and push them into a master timeline. Then, you can play the master timeline that would control all children.
 
Another way would be, if you need all of those individual timelines to play independently, I would push the individual timelines into an array. Then, you can just run a check to see which timeline should play and which should reverse.
 
Ah! Hold on, I'm starting to make sense of your code (sorry, jQuery always makes it confusing to me). You're already doing what I am suggesting...
 
Let me check some things again...
 
 
------
 
Ok, ok, I think I get it now and I can offer you a suggestion, here's a fork of your pen.
 

See the Pen LWmgWZ?editors=0010 by dipscom (@dipscom) on CodePen
 
Is this what you were after?
 
If so, have a look at the SupressEvents bit here:
https://greensock.com/docs/#/HTML5/GSAP/Core/SimpleTimeline/totalProgress/
 
 
By the way, thank you. I have learnt a neat little trick from reading your code. "Store animation in the DOM object of the item".

Hi stevenb85,
 
Welcome to the forums!
 
I think you will be better off by trying to use a sprite-sheet rather than an image sequence. You will always be having loading issues if you are trying to update the "src" attribute of your <img> tag. Bellow is a thread here in the GSAP forums about sprite sheets:
 
https://greensock.com/forums/topic/15708-is-it-possible-to-animate-spritesheet-through-gsap/
 
 
Your connection error could be one of N things. A super quick search online pointed me to this stackoverflow: http://stackoverflow.com/questions/24931566/getting-error-in-console-failed-to-load-resource-neterr-connection-reset
 
Bottom line is that we can't be sure because depends on your setup.

Well, if your requirement is to have a variable and use its value doubled, I am not aware of any other "less complex" way, save of creating a second variable...
var space = 256; var doublespace = "-=" + space * 2; TweenMax.to(elementA, 3, {x:doublespace}); Ultimately, you need to specify what the tween needs to do...

Hey Tazintosh,
 
Welcome to the forums!
 
I get that every so often... It's an easy fix actually. Just let GSAP handle the centring for your by using yPercent.
 
Remove the CSS transform: translateY(-50%) and add the following in line 4 of your taz_animateOverlay() function:
TweenMax.set(overlayElem, {yPercent:-50}); TweenMax.fromTo(overlayElem, 1, {...}); Easy peasy.

Left and Top are not the same thing as X and Y. 
 
X,Y are an alias to the translate() transform. So, if you are setting you element at left:300, top:200, it is effectively sitting at x:0, y:0 (in the CSS lingo, transform: translate(0,0); )
 
To achieve what you are after you can leave all your starting objects at left:0, top:0 and place them where you want using GSAP, then you can use absolute x and y.
 
Like so: 
See the Pen BWKvJb?editors=0110 by dipscom (@dipscom) on CodePen

Yep.

Now we're getting somewhere.
 
I changed to scale because rotation was way to epileptic to my liking.
 
I think I get what you are trying to achieve. We can tackle it with this setup but just ever so slightly...
 
You still want to set the rotation to happen with a .set() call and you still don't need a timeline for that.
 

See the Pen zNgjQB by dipscom (@dipscom) on CodePen
 
Better?

You'll get away with a certain number of particles on DOM elements, desktops will not break a sweat, mobiles might struggle a bit.
 
The optimal way of doing particles is using Canvas, more optimal would be using WebGL (but that can be overkill) - A specialised library such as Pixi will be the best solution, really. But Canvas will suffice if you're not doing much else.

Hello Learning,
 
You issue is in your CSS positioning. You need to set the slides to be absolute if you want them to occupy the same spot in the DOM, otherwise they will be stacked on top of each other.

Hello emilychews,
 
As Graig said: Welcome to the forums. Thank you for the CodePen, helps a lot to see your issues.
 
I had a stab at your problem and saw that the solution is actually related to the fact you're using .fromTo() methods on all your tweens. They are useful but you have to know how they behave. Have a look at this video by Carl, it will explain you some important details:
 

 
As for a solution, the bellow code is an amended version of yours. It took the liberty to change you y into yPercent and opacity into autoAlpha for more flexibility and control. In the docs, you will find detailed explanation (and loads more info) about those.
 
.fromTo('.sliderbar', 3, {scaleX: 0}, {scaleX: 1})    //red slider bar underneath text .to('.slidetext1', .7, {yPercent: -50, autoAlpha:0}) .from('.slidetext2', .7, {yPercent: 50, autoAlpha:0}) .fromTo('.sliderbar', 3, {scaleX: 0}, {scaleX: 1})   //red slider bar underneath text .to('.slidetext2', .7, {yPercent: -50, autoAlpha:0}) // Make the first text jump to the start point .set('.slidetext1', {yPercent:50}) .to('.slidetext1', .7, {yPercent: 0, autoAlpha:1});

That's expected behaviour. The long story short is that GSAP uses x and y as a proxy to transform translate(), they are not the same thing as the x and y in SVG, when you tween the x and y in your pen, you are really overwriting the transform rotate() with new values. 
 
You can do one of two things, reposition your inner circles using transform translate() or use the attrPlugin like so:
TweenMax.staggerFrom(menuItems, 2, {attr:{cx:2000, cy:2000}, autoAlpha: 0, ease: 'Power4.easeOut'}, 0.5); Does that help?

As a rule of thumb, you should limit using .from() tweens to only the first tween of the element, it really can cause confusion and not pleasant behaviour.
 
However, if you must work with it, for whatever reason that might be, you just need to grasp the immediateRender property and how GSAP works with it.
 
Carl does, as always, a great job of explaining it all in the following video: 
 
It should set you on your path.

tl.add("slindeMoves", "-=0.5"); *Magic* 

It's not that much of a hack.
 
I can tell you why it works that way, though. It's like what I said in the previous post, you have two timelines trying to control the same animation but no way for them to communicate between them.
 
This time, you are interrupting the first one as you were before but this time you are telling the second one to start at a particular point and end at a particular point. And also, this time, you are creating the second animation every time there is a hover over. It should still work without recreating it every time.
 
The ideal scenario here is for you to create one timeline for the first animation and another for the secondary animation then, a third master timeline that controls the other two.