vektor

ShockinglyGreen
  • Content Count

    16
  • Joined

  • Last visited

Community Reputation

8 Newbie

About vektor

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Still an issue for me unfortunately Update: Applied the style to the element specifically (I had a couple of spans inside a h2) and it helps! ๐ŸŽ‰ ( Still a little jump but luckily not very noticeable :)
  2. vektor

    SEO and GSAP

    One of the sites I am working on has fade in animations and uses css .animin{visibility:hidden} and then TweenMax.set(".animin", { visibility:"visible" }); to stop flash of content before the javascript is loaded. I can confirm that this text is currently NOT being indexed by Google. (The other non-animated pages are fine) I will try adding a <noscript> style to see if that helps! Will post the results Anyone else had experience with this issue? Update: test1: I added the <noscript> style and now googling text from the page in quotes returns the correct page. The only thing is that there is no bold highlighted copy in the SERP preview, it just shows the meta description. Not sure of the implications of this? test2: Removing the .animin class from the text returns the correct page when searched, no SERP bold preview text I'll wait and see if test1 results change Update2: I can confirm that text that has been 'splittexted' is not being indexed. I have used this, I assume that will help onComplete: function(){$splitTxt.revert()} Update 3: Any SplitText text is still not indexed in Google, even after an onComplete:revert(). Anyone else come across this issue before?
  3. vektor

    SVG translate elements from svg coordinates

    @OSUblake awesome ๐Ÿ˜Ž Ooh, "_gsTransform", nice!
  4. vektor

    Scrambletext length wrong (svg)

    ๐Ÿ’š๐Ÿ’š๐Ÿ’š๐Ÿ’š๐Ÿ’š๐Ÿ’š
  5. vektor

    Scrambletext length wrong (svg)

    Aha! Yes fixed thanks How can I get this updated non codepen only version?
  6. vektor

    Scramble Text using existing content of div

    Ah silly, yes I missed the 'codepen only' bit Fixed here
  7. vektor

    Scrambletext length wrong (svg)

    Cool Did some more tests, removed the tweens from the loop in case that was causing an issue. Also tried removing tspans, still the same result ( codepen below )
  8. vektor

    Scrambletext length wrong (svg)

    Hi, I have a small issue with the Scrambletext plugin using the wrong lengths for the text ( in an SVG ) Most of the strings start scrambling with too many characters, it also still happens if I define the 'text' parameter Can't work out why? Is there a workaround to force a specific length? Thought it may be to do with the tspans, but I experimented with removing some and it didn't seem to make a difference ๐Ÿค”
  9. vektor

    Scramble Text using existing content of div

    ๐Ÿ‘๐Ÿ˜Ž๐Ÿ‘ If I use that modified Scrambletext.js in my project I get this error I will keep using my manual loop anyway in this case, as I am now also checking for classes and applying other animations accordingly
  10. vektor

    SVG translate elements from svg coordinates

    ๐Ÿ˜„๐Ÿ˜„ Cheers guys, getBBox() is what I was looking for !! The cloning method is clever too, wouldn't quite translate to my real life project though The forum post on SVG gotchas about BBox was very helpful ๐Ÿ‘
  11. vektor

    SVG translate elements from svg coordinates

    Great, thanks! So that works if I rebuild the scene using multiple svgs / elements, which will work for some things However one of the SVGs I need to animate has lots going on so it won't really be possible to recreate it like this So the technique of css absolute positioning won't affect anything inside the SVG So my main issue seems to be: How to center / set absolute coordinates of the svg elements inside the svg using GSAP? Is there a simple way to do this, I'm thinking due to the nature of SVG maybe there isn't..? If that's the case I can just manually pass in the correct relative x,y values needed, or make some changes to the svg file itself ๐Ÿ‘พ My not-working codepen below
  12. vektor

    Scramble Text using existing content of div

    When I did this on an SVG ( haven't tried with HTML ) using stagger, it used the content of the first text element for all of them So I had to change this tl.staggerTo($totals, 2, { scrambleText: { chars: "0123456789", ease: Linear.easeNone}}, 0.2, "label"); to this $totals.each(function(i, el){ tl.to(el, 2, { scrambleText: { chars: "0123456789", ease: Linear.easeNone}}, "label+=" + i*0.2); })
  13. vektor

    Scramble Text using existing content of div

    Cool! FYI, docs still say 'text' is required and doesn't mention this default behaviour https://greensock.com/ScrambleTextPlugin ๐Ÿ™ƒ
  14. Hi, I have researched and tried various things but can't work out if there is a way to translate svg elements from 'absolute' coordinates? i.e. translate a bunch of svg elements all starting from the center, and finishing at their actual position So in the codepen, I would like to tween all the chickens from the black box to their actual positions ( on the black lines ) Currently, I put in the x,y value of the black box to tween from, but the chickens use this as a relative x,y I could work out the correct relative x,y value to tween from, but in the real project there are many elements that may change slightly Am I missing something obvious? Thanks
  15. vektor

    Responsive tween variables - className caching

    Great, I think I'll start with trying the modifier plugin method, as I have other more complex animations that may need this approach. Also the other method of creating a new tween at the same progress(), I'd have to get my head around how this would work with Scrollmagic scenes. I assume I would have to also destroy and re-create the scrollmagic scene and re-add the timeline. But don't know if there's a way to add an in progress tween... So using modifiers is sounding a bit nicer at the moment.. I just worked out what I was doing wrong with modifiers method, I was doing this, which was making it jump to the values tl.to($logo, 0.8, {scale: 0.6, y: 1, modifiers: { y: function(y){return $(window).width() >= 1000 ? -10 : 40}}, repeat: -1, yoyo: true }, "start"); I needed to do this to make it tween properly tl.to($logo, 0.8, {scale: 0.6, y: 1, modifiers: { y: function(y){return $(window).width() >= 1000 ? y * -10 : y * 40}}, repeat: -1, yoyo: true }, "start"); Here's the working Codepen CSS vars thing looks cool, unfortunately my project needs to work in IE11 too so will have to think about that one Great info, Cheers!!!