elegantseagulls

Hi @Ek1 Just add actionHover.progress(.5)after you setup your timeline (line 120 on your codepen).

@Ek1 I think I see what's happening. Since you are tweening the same clippath(s) for both image hovers, playing and reversing, when you jump from one to the other, the values get their signals crossed as to what would take priority (the reverse or the new play). I don't have time to test this, at the moment, but I think your best bet for this animation,would be to set up the animation as one timeline and set the progress to progress(.5), then use hover conditionals for the entire SVG and both images, Tweening to progress(0) or progress(1) on each image hovers, and back to the progress(.5) on SVG unhover. Also, to further simplify, and improve render performance, you really only need one ClipPath applied to the top (think z-index) image, as it'll just cover up the bottom image negating the need for a clippath on that one.

Hi @Ek1 Have you tried using .fromTo Tweens for this? That way the start and endpoints are both existing in the animation code. actionTrHover .fromTo($trPoly,time, { attr: { points: "0,0 100,0 100,100" } }, { attr: { points: "-10,0 100,0 100,110" } }, 0)

Hi @Lars Ejaas From your CodePen example you wont be able to access the internal paths of your SVG to animate them, as it's just being rendered by the browser as an embedded image. This is why people Inline their SVGs. I'm not familiar with Joomla, but when working on some WordPress projects I've use PHP files with the SVG code in them and injected them with that. Looking at your example, your best bet may be layering multiple images/svg as and animating these images over top of each other, that way you can take advantage of browsers' hardware acceleration. Also, for optimizing, using SVG OMG may help reduce your file size: https://jakearchibald.github.io/svgomg/

Ah! didn't check your first CodePen to see that you had already implemented MorphSVG.

@Luckyde, you may find this helpful: This was using MorphSVG, but I believe the concept is similar.

Agreed with this. However if you're stuck on SM, you can set your panel tweens to move through the entire view port starting and ending at half way, to avoid starting and ending off screen. Took some sideways thinking to get around some of ScrollMagic's quirks, but: https://codepen.io/elegantseagulls/pen/NWKMyam?editors=1010

Was just adding that to my answer/pen!

@Daniel Hult This should help: (if it doesn't start at ~13:26)

Hi @Daniel Hult I think this issue is that you've defined your tween inside your play/reverse function. You'll want to define that outside, and just use the click listener to play or reverse the Tween. Here's a fork of what that looks like (I also used TweenLite instead of a timeline to further simplify, but both ways will work). https://codepen.io/ryan_labar/pen/oNvwqYo?editors=1010 Note: You'll also want to set reversed to True, so that it play in the forward direction on first click.

@PointC - I've lost count at how many times I've gotten the notification that you've posted the solution literally moments before I hit the 'Submit Reply' button!

Hi @Fakebook The issue is with the way some browsers display fonts. The issue you're talking about was discussed in some pretty good detail here: Here's a link to my pen with the closest solution: https://codepen.io/elegantseagulls/pen/bJpGog The CSS you'll need is: font-kerning: none;

OK. The site is finally live, and I'm really excited about how the animations turned out on it: Especially the Logo hover, mobile hamburger toggle, and (very related to this thread) the heading animations. Hope you all like it, and thanks again for the assist in debuggin the SplitText issues in Safari. Here's the site: https://wavesforwater.org/

@Luckyde We're using the files from 'bonus-files-for-npm-users > umd` Also, TimelineMax isn't referenced in this CustomEase.js, so I have a feeling your error may be coming from somewhere else. Also, to elaborate on my first reply a bit: The important reason for not putting the file in the node_modules dir is that these files won't be referenced in the package.json file, so if someone were trying to work with your environment from a new machine (assuming your node_modules is in .gitignore as it should be), those files wouldn't be available to yarn/npm install etc.

Hi @Luckyde With our projects, we have a plugins directory that we import from as such: import CustomEase from './../static/plugins/CustomEase'; As far as using Require, I've found that I had to do so when using GSAP's premium products (SplitText, etc), which I access in a similar manner: require('../../static/plugins/SplitText.js'); with the Require, I need to add SplitText as an exception in the globals of the .eslintrc file. Hope this helps!