mimeartist

https://codepen.io/mimeArtist/pen/LYpMVzx I created a codepen, but of course it works there

Hi, I'm getting a DOMException when trying to use CCSRules - my code is below... I originally thought perhaps it was because my gsap files were on an external CDN so bought them in locally - but still getting this error - CSSRulePlugin.min.js:10 DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules iconRule = CSSRulePlugin.getRule(".hover_icon:hover"); //get the rule gsap.to(iconRule, {duration: 3, cssRule: {color: "#ff00ff"}}); buttonRule = CSSRulePlugin.getRule(".hover_button:hover"); //get the rule gsap.to(buttonRule, {duration: 3, cssRule: {color: "#ffff00"}});

Thanks again - Got it working at https://l-o.st

Thanks Zach you're a life saver!, I was going to track the positions of some stuff - but not needed, and forgot it was there, was wasting my time messing around with the CSS instead, thanks again! Also my bold and italics styling is working properly now

Hello, When using splitText with chrome I'm finding that from the second line in a paragraph, everything indents by 6 pixels - This is only happening on Chrome, not Safari or Firefox - Any ideas? I can see in the code it's using soft hyphens in places, and wondering if that is causing the issue somewhere. Thanks! James

Hmm... I'm confused now... I thought ScrollTop has been removed in version 3?

I've resorted to using... as can't work out the issue $('html, body').animate({ scrollTop: $(theSectionToJump).offset().top }, 1000); This is the error that was coming up - just in case it's useful

Hi Zach, I have.. but it works on there - Going to check for unclosed DIVS etc I think https://codepen.io/mimeArtist/pen/dyyqbJe

Thanks Jack... I'm getting this error, when I try and do the following - I've checked the div #section4 exists, so thought it might be from not registering it (I don't know what tree shaking means) gsap.to(window, 1, {scrollTo:"#section" + whichSectionJump}); TypeError: null is not an object (evaluating 'f[n]')

PS Do these two need registering? gsap.registerPlugin(ScrollToPlugin, EasePack);

TweenMax.to('body', 0.4, { color:recklessFG, backgroundColor:recklessBG,overwrite: true }); I've found that since I updated, I've had to use overwrite:true as things that were in order were going out of order? I have a lot of rollovers that all impact a few divs... e.g. rolling over a piece of text changes the background etc. and hides text, and the rollovers can happen very quickly.

Ok, delved in (read) the docs and throwprops is inertia, and realised I needed to register them...

Hi, I've got a site that's not quite ready for launch and I thought I'd upgrade to gsap 3 before going live in a few weeks rather than updating at a later date... my question is which of these files do I need to replace, as a few seem to not be there anymore? I'm currently using... jquery-3.4.1.min.js TweenMax.min.js (replacing this with gsap.min.js) Draggable.min.js (replacing this with new draggable.min.js) ThrowPropsPlugin.min.js (this doesn't exist in the download any more) ColorPropsPlugin.min.js (this doesn't exist in the download any more)

This is the thing I've been working on... basically i have two end points that go through a predefiined point each, so the mid point where all the points meet makes the text... and because they've got a little bit of a delay / change in speed in has an more natural feel... I guess this is the best way to do it... i wanted to avoid a tween to the mid point and then another tween to the end point.. Didn't realise I could feed the ease back in... I'll do that and reverse it by eye I think Thank you!

I've built a custom ease using the greensock visualiser.... theEaser = "M0,0 C0.126,0.382 -0.164,0.5 0.5,0.5 1.166,0.5 0.818,1 1,1"; I think I actually want to play it backwards, is there a way of reversing these values?

I'm currently letting TweenMax do some of the hardwork of working out transforms rather than having to work out the matrix translations myself Here is an example of the code - Is there a faster way of grabbing the transforms... I'm dealing with about 4000 objects, and although this is an internal project for converting flash SVG's for use in web sites I'd obviously like to make it faster... (without having to do too much maths

Thanks Manfred, That looks very good... the issue I have is that it's got to work kind of randomly too... I can't post the code here... but this is the instagram video of what I achieved yesterday... I arrange the lettering in flash and export it as a svg, which I then grab the points from https://www.instagram.com/p/BTHTmeilNRd/?taken-by=jameseverettstone

Thanks Carl, I set those at slight extremes to show the issue... I've decided to do a workaround, whereby I do a tween to the midpoint and then a new one for the second part from the control point to the end point... to get a curve I've assumed a control point for each half and it seems to pretty much work... I want the midpoints when all reach to move very slowly... so I'm doing an power ease out and then easein... Thanks for your help! James

Hi Carl, Here is my codePen, as you can see when you run them one reaches it's mid point more quickly than the other... http://codepen.io/mimeArtist/pen/rmeNKw Alternatively I'll just tween to the mid point, and then perform a tween to the end point... but to get some kind of curve / gravity, I'd need to have a different ease for both axis? Not sure how to do that? James

I have about 10 beziers routes that all have the same start and finish points, and the control point is a random position for each one... how do I get it to reach each control point at the same time, because at the moment it draws each curve beautifully and they finish all in sync... but this obviously means they hit their control point at a different time? thanks, James

Does anyone know of any effects to the viewport on ios? I've got a draggable panel... with videos in it... when the video is played using videojs on ios it automatically goes fullscreen, and when i go it seems that the draggable gets stuck half way I don't think this is a draggable issue... but does anyone have any pointers to people that have had issues with anything like this, sorry I can't supply a codepen for it?

Thanks for the replies... this has always confused me... where should I be definiing X in the CSS? and why does it update the position but stick at 10px? http://codepen.io/mimeArtist/pen/mRNvwQ

I'm doing some animation that doesn't need to be pixel perfect, infact it would be better if it was slightly 'off'... Is there a way to get a tween to stop when it's within a few pixels of the destination... Also how do I get it to report the position that isn't rounded, should I be using x rather than left? http://codepen.io/mimeArtist/pen/KaObMG

I just tried to place my code in there, I've since forked it... and it worked... turned out I'd added the throwProps, but my TweenMax version was a lower number... so put the new one in and it worked! thanks for your patience http://codepen.io/mimeArtist/pen/zNJBOa?editors=0011

I've included the ColorPropsPlugin and in the tween I'm wrapping those values in the colorProps:{ } do I need to define them in the initial object? Sorry for not including a codepen, it's just part of a bit of a monster myFace = {headWidthVal:headWidth, headHeightVal:headHeight, curveFactorVal:curveFactor, curveFactorBVal: curveFactorB, randomAmountVal: randomAmount, guideStrengthVal:guideStrength, faceColVal:faceCol, noseColVal:noseCol, hairColVal:hairCol }; TweenMax.to(myFace, 0.5,{ headWidthVal:aimHeadWidth, headHeightVal:aimHeadHeight, curveFactorVal:aimCurveFactor, curveFactorBVal:aimCurveFactorB, randomAmountVal:aimRandomAmount, guideStrengthVal:aimGuideStrength, colorProps:{faceColVal:aimFaceCol, noseColVal:aimNoseCol, hairColVal:aimHairCol}, onUpdate:reportArray});