Jump to content
GreenSock

Jonny

Members
  • Posts

    33
  • Joined

  • Last visited

Everything posted by Jonny

  1. Hi @PointCyes this is now resolved. It was targeting the layer correctly and changing the opacity, but because I hadn't included cssPlugin it wasn't visually showing. No errors are displayed when this happens either. Essentially all i had to do was include the plugin. thank you for your help.
  2. Jonny

    Targeting svg layers

    Hi Blake, I literally just swapped it out for TweenMax and indeed it is now working. What threw me off was that there weren't even any errors displaying the console when trying this with TweenLite.....
  3. Hello, I have started this as a new topic as it's changed slightly. I am animating the opacity of an svg <g> layer. I am trying to target the layer and animate that, but nothing happens. The timeline seems to play because my onComplete callback is firing, but the tweens are not running it would appear. However, if I try to do the exact same tween in jquery animate method, then animation happens. So I am led to believe it is an issue with greensock, or I have made an error in my code, but seeing as the jquery version works perfectly I am not sure this is true. https://codepen.io/JonnyPS/pen/zQXWVa?editors=1010
  4. Jonny

    Targeting svg layers

    Hi PointC, valid point, but i have checked and that is not what is happening. I have included a working demo of the final thing that I want in the codepen below. It would appear jquery can target the element fine, but greensock doesn't?
  5. Jonny

    Targeting svg layers

    Thank you geedix, this was very helpful
  6. Jonny

    Targeting svg layers

    Hi everyone, thanks so much for the responses. I have now implemented exactly what i want in a codepen and it's still not working. I have linked the codepen here, and on line 36 have included a jquery animate method which animates the svg exactly as i would like it to, but as soon as i comment it out and uncomment the greensock timeline on line 44 it doesn't work, but i know it should because the jquery version works. Any help would be greatly appreciated, the problem seems to be that greensock is not able to target the svg layer in this instance and i don't know why. https://codepen.io/JonnyPS/pen/zQXWVa?editors=1010
  7. I am working on a project where i want a timelinelite to change opacity of svg layers. I've made a codepen above where i am using divs to replace the svg temporarily. when i copy this working code into my project and target the svg <g> instead of the divs here, nothing happens. Question: - My copying might have been buggy, but I am concerned timelinelite won't work with svgs, is this right?
  8. Thanks Carl. I'm using vanilla Javascript but 'this.querySelectorAll('.logoCircle')' worked equally as well Regards, Jonny
  9. Hello, As you will see from my codepen, I have multiple elements, which I want to apply a Greensock tween (actually eventually it will be a timeline) when the 'onmouseover' event is triggered. It is all working well, but it applies the Tweening to all elements, - i only want it to happen to the specific one i'm hovering over. I don't want to use different id's etc, because I will ultimately have multiple elements. The mouseover is targeting all the classes it finds a match to, not just the nested one in 'this' svg..... Essentially I want my tween to look like this, - I believe the logic to be correct but the syntax is not. (Bold is the part that is the problem): TweenMax.to( this > + '.logoCircle', 0.75, {alpha:0, delay:0}) Thanks in advance for your help. Regards Jonny
  10. Hello, What task automation and features would people most like to see in banner prodcution? I am building a production workflow using gulp and browsersync etc. Just wondering what people would most like to use in this instance. Thanks, Jonny
  11. Jonny

    SVG morph problems

    Hello, In the attached codepen, i have two SVGs i've exported from illustrator. Both were exported as svg code and the first thing i do with greensock is convert to paths. I want the first (the vertical line) to be morphed into the second (the arrow shape). The idea is that it will be like the bow on a bow and arrow being pulled back. For some reason it just doesn't seem to work for me, any guidance would be appreciated. Jonny.
  12. Hi Diaco, Sure, this is similar to the way i normally do it, but i really wanted to use the repeat:x in the timeline variable parameter.s thnaks for the quick reply.
  13. Hello, I have a simple animation that i would like to repeat multiple times. However, I would like to play the whole timeline on the first run, but go back and start from a later position on subsequent runs. I only want to see the first part of the animation on the first run. I cannot work out how you would play the timeline, have a repeat and on subsequent runs start at label position. Any help on this greatly appreciated. thank you, Jonny
  14. Hi Blake, Thanks very much for these links. Although my aim has changed from my original plan (the slider now starts at the beginning and ends after all the loops, with no restarting with animation timeline - think this is more useful for debugging purposes) - I have resolved it!! I am very happy about this. I created my animation timeline, and added a repeat method, the tl.exportRoot() method takes these repetitions into account as part of the totalDuration. If you are interested, here is a simplified codepen of what i've done: http://codepen.io/JonnyS/pen/mVdwWj
  15. Hello, I have been thinking about this issue for a while now. I want this tool to be adaptable and flexible for applying to different projects. This means that a few requirements are needed in order to achieve this with minimal tweaking: 1. There should not be a need to manually search for greensock timeline names (hence the use of exportRoot()) 2. I have decided that I have approached this incorrectly, and that the slider should start at the beginning, and not loop with the animation timeline, but carry on and only reach the end when the animation timeline has stopped, after however many loops is required. This would involve pre determining how long an animation timeline is, and multiiplying that by however many loop i had. Is there a way to find the length before a timeline has been played? This way i could dertimine the length of the whole animation, not just the length of one loop, which is essentially what is happening now.
  16. Hello all, Sorry for the slow reply, i haven't had the chance. Yes i understand what is happening here, and thank for the demo Blake. the everytl playhead wouldn't restart at the beginning position on loop because of the time that has already gone before in the tl timeline. Bit of a pain really but not sure how to over come this, without moving away from using exportRoot, - it works perfectly well on the first loop, which is the most help. thank you for your help. Regards, Jonny
  17. Ok, This is visible through the behaviour of the slider, the first time it starts at the beginning (0/6seconds), then the second time half way through (6/12) and the third time two thirds of the way through (12/18seconds). Now i just got to figure out how to get everytl to revert back to the beginning on loop
  18. OK, I see what you're saying about the scope of actions within a function, but are you saying that the exportRoot() timeline will keep ticking over regardless of what happens within a timeline, - so the exportRoot version will only stop counting when my original tl stops and doesn't restart etc? I'm not sure how i can go back and reset the exportRoot() timeline to be 0 when the original one does? thanks.
  19. Hello, I am having difficulty with the greensock exportRoot() method. I have attached a basic codepen, and i'll explain the trouble here: I have a slider using jquery UI to scrub through my animation for debugging purposes. I want to be able to insert this slider into any animation i'm creating, so on the slider functions i use the timeline.exportRoot() to pick up any greensock timelines that might occur in the script; - I don't want to have to pick through the scripts to find out what the timeline variables are named each time, I want this to be an adaptable, flexible tool. I want to run an animation repeatedly, and i want the slider to go back to the beginning and restart animating on each loop accordingly, inline with the animation. As you will see in the codepen, this is not what happens. I have logged the time() for the animation timeline and the exportRoot version, and you will see that the exportRoot timeline does not go back and restart along with the animation timeline. Is there a simple way to achieve this? thank you very much. Jonny
  20. There were a couple of issues, most fundamentally, you hadn't loaded the jquery library in codepen. JQuery is a bit overkill anyway so i removed your document.ready(); call, and replaced it with: <body onload="init()"> init(); simply calls needleSpin.play(); I used a javascript mouseover event listener to detect the hover, and then paused/played the relevent timeline. take a look below. http://codepen.io/JonnyS/pen/wKLaoZ J.
  21. i have spent all day on this looking into what gets logged in the console. This worked in about two minutes, and made life a lot lot simpler. thanks very much J.
  22. Hello, I am creating a pause/play button as part of a suite of debugging tools. I want this to be versatile so that it works across any greensock animation. What i need to do is retrieve the greensock timeline, (without relying on going in to each aniamtion and finding what the timeline variable has been named) so that when i click on my pause button, it will grab all greensock timelines and pause them. I can see that the timeline returns: s {vars: Object, _totalDuration: 5, _duration: 5, _delay: 0, _timeScale: 1…}_ But can't see how to access this and pause it, could anyone help? thank you, J.
  23. Hello, no codepen for this, i don't think it requires one, if this is not a common issue i will create a codepen to demonstrate the issue: I have a timeline with splitfield text animating character by character. Three headlines alpha in and then out one after another. This works great first loop, but i repeat the animation by going to a label: tl.play("mylabel"); This works great the second loop so i replay as above. On the third loop the splitfield text has not appeared to have reset properly and certain characters are still showing (it looks like each character has stopped alphering out a certain point in the tween). Is this common? The only way i know to amend this is to use tl.clear(); and then call tl.play(); This works fine but the problem with this is that it wipes out my label, - even if i try tl.clear(false); and so the animation starts from the very beginning again. am i doing anything wrong or does anyone have similar problems with spltitextfield, or tl.clear and labels? thank you.
  24. Hello all, I'm sure we're all making the transition to HTML5, and finding a lot out a long the way - and getting mixed messages a lot! I'm interested to hear people's opinions on using web fonts in html5 banners, as well as general approach to file size. There seems to be very little to no advice on this, and i've had to liaise with ad server platforms on how to use web fonts - does it count as initial load, do we store locally or via CDN etc? What are other people's opinions? Currently I locally store all web fonts needed (ttf, woff, eot and svg). I only count the zipped file size of the largest type file format for each type weight, and add that to the html, css, js and images. - i link to GSAP via CDN. I try to aim to have the whole ad within 200k. Largest font size comes in to about 60-80k in total for two weights, that leaves 120-140k for everything else. I could use SVGs, but this makes it impossible to use splitText plugin for example. How are other people approaching these fresh challenges? J.
  25. In regards to web fonts and file size, i am also finding great discrepancies between ad server platforms and publishers spec and recommendation. It would seem as though in actual fact - nobody knows! Our approach currently is to locally store webfonts (ttf, woff, eot and svg) and load them using @font-face - this will only load up the format that's needed. I am setting a standard spec to work within, and will have to liaise with publishers on this as we go along, but i am aiming to do the following: Count file size as being js files, css, images and html, as well as the largest font format file. Llink GSAP via CDN. I aim to be within 200k on this. which would mean everything bar fonts in the zip file is is going to be around 100-140k in size.
×