Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by mimeartist

  1. Ok, in this case I think it's better I not post any more pens as it's going to confuse things even more... they're all the same codepen which makes describing this even harder, so even though it's possibly not a gsap issue, it perhaps comes across as one because the embeds are acting strangely and giving false negatives.




    1. On this page we're on now, there are several (now 3 since your last post) embed code pens called Image Parallax (url ending /PoOpobM).


    2a. The second of these code pens intermittently doesn't work in safari.


    2b. On my daughters iMac the 2nd one doesn't seem to ever work with the mouse wheel scrolling.


    2c. On my MacBook, it's intermittent with the trackpad scroll wheel (but more often that not it doesn't work) 


    3. When opening the codepen in a new window it works every time (only tested on my iMac)




  2. No... sorry... the two embed on this page are of the mountain parallax scroll demo, the first one works in the page but the second one doesn't. So I assumed they were different demos. However when I looked at the URL's they were the same. e.g I use the scroll wheel over the one at the top of this page, and it scrolls, but the second doesn't.


    The second embed (Posted Saturday at 01:12 AM) doesn't work but the first does. It obviously works when you click 'edit on codepen' and it opens in a new window.

  3. 50 minutes ago, GreenSock said:

    Are you absolutely positive that you cleared your cache and aren't accidentally using an old file? I'm on a Mac, Safari 16, and it works great. Scrolls fine. Can you also please confirm which URL you're looking at exactly? 


    Just tried it again on my daughters iMac that has never been on this page, and it was working 'occasionally'... however it does work when you click and open it in it's own window?!?  Sorry for possibly giving a false negative, but perhaps it's to do with the embed... one one occasion it worked when I clicked the 'rerun' button while embedded on the forum... they both work when opening in a new window.


    Update (as writing this) Was just about to post the two embeds to show the one that works and the one that doesn't when embedded and realised they're the same embedded URL... so it must be something weird going on with the embeds in the forum? 


  4. On 9/17/2022 at 1:12 AM, GreenSock said:

    Hm, are you positive? With my workaround in place, I can't seem to break it. Got a minimal demo I can look at that shows the workaround in place but with it still broken in Safari 16? 


    I just updated the CodePen-only beta file with the workaround (internal) and it seems to work for me: 






    This demo doesn't scroll on my Mac... also I'm a little confused about whether I've been using normalise or normalise Scroll... so will need to test my stuff again just to make sure I've not been testing without having it set etc... I think when normalizeScroll is correctly set the url bar in safari on an iPhone no longer shrinks, interestingly (From the documentation it previously stated this was not possible to stop from shrinking)

  5. The workaround doesn't work for me, but I've been doing lots of workarounds myself with parts of it, so I wouldn't take that as written. One of the issues I've resolved is by scrolling using gsap and scroll to, rather than the scroller, and that seems to iron out issues with the normaliseScroll I was having and I can still have the nice smoothness.

  6. Wondered why normalizeScroll wasn't working... was using the English spelling normaliseScroll...


    Fixes my issue for MacOS, however 'normalizeScroll' is now breaking my scrollTo with smoothscroll on iOS... It seems to not want to redraw the screen (I've a fixed image underneath the scroller, and it doesn't remove it?)


    Is there a simple way of normaliseScroll only run on mobile?



  7. Is anyone else getting weird results on Safari with the new version 16.0.... I've been working on a site for the last couple of weeks and everything was fine, but today I've noticed when I scrolled on my build that it wasn't scrolling?!?!


    I can't share the code... however when I looked at this demo... it's working in Chrome but not Safari? Anyone else getting the same?


    See the Pen PoOpobM by GreenSock (@GreenSock) on CodePen

  8. Hello,


    Is it possible to only have data-lag to work when scrolling down? eg when scrolling up it is normal? I really like the effect I'm getting when I scroll down as my text all cascades nicely into place, but in the opposite direction (scrolling back up the screen) content is obviously overlapping 


    Thank you,



    I've started created NFT artworks, mainly through procreate as it's nice to get away from coding ocassionally.




    However, they're now allowing HTML NFTs so I'm looking to create some interative pieces, just enquiring, does anyone here have any experience in creating them, and if I wasnt allowed to link to external libraries, as a business user am I allowed to include the code within my NFT?


    This is all very new, so I'm just enquiring before just going ahead and doing stuff.

  9. Thank you both,


    I have quite a few items on screen, so figured saving a few milliseconds on each might make things even smoother... it's smooth on my 5 year old iMac so not to  bothered... but it's nice to get it as trim as possbile before launch rather than after :)


    So just to confirm - it's fine to use the id then class, and right to left is unlikely to make much differnce?

  10. Just trying to squeeze the last drop of speed out a project...


    Reading up on CSS speed checks, I was surprised to read https://css-tricks.com/efficiently-rendering-css/ that in CSS you put the class before the ID as it renders right to left, I'd imagine this is not as important as it once was - However thought I'd ask... which is the quickest way to animate a class with an ID div...


    Is it (as I use presently)


    gsap.to('#circle_logo .roundTextShadow',theSpeed, { 'fill':theTextColor});


    or is it, as per CSS in the document, 


    gsap.to(' .roundTextShadow #circle_logo',theSpeed, { 'fill':theTextColor});


    I imagine GSAP is doing all it can to speed things up, so just wondered out of interest whether this is something I should be considering




  11. This is perfect, thank you Zach, i was trying to make sure this would work with ipad etc. and it seems to, that's why I was tying it in with draggable, so you could distinguish between dragging and clicking.

  12. Hello,


    I'm trying to make it so that when any item in a DIV is dragged, the whole parent DIV moves, but if just an item is clicked then it performs the click. I've made a codepen, but even the dragging is not working (it is in my real work)


    The issue I have is that when the user clicks I want to get the attribute of the child item they've clicked on, even though I'm using trigger to make the parent draggable - I'm not sure why even the draggable isn't working in the codepen, other than perhaps my approach is all wrong... any ideas?



    See the Pen abZExLM by mimeArtist (@mimeArtist) on CodePen

  13. I was trying to target an href inside a div that has a load of other stuff so though It was easier to do it that way - however just figured a way to target it directly - thanks for all your help - not always keen to just try a different way and give up route, but that is kind of what i did anyway :D

  14. 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"}});