gilesht

Argh! .... I see what you are saying @OSUblake thank you ... that gives me some new ideas to work on. I'll come back to you shortly

hi @OSUblake really appreciate your help slapping my head re unique IDs (apologies it's been a while) but a bit more concerned on your comments about being unable to scroll & pin SVG's I have to be honest that I'm coming back into this from a background in GSAP + ScrollMagic, where SVG animation was supported are you saying this is no longer an option ? if so, is there another format thats supported? the whole magic of SVGs was that it appeared to be an image, but that you could group and animate sections down to a finite point and animate them

Hi All My question extends @rimedtades post which was answered answered by @Cassie . I want to achieve the same result as her great codepen example https://codepen.io/GreenSock/pen/GRWobyX but fade I/O 3 groups of SVG rather than HTML text. I've branched her example and attempted to make the minimum of changes as some of the theory is very new to me (i've made a few guesses along the way as well around the .toArray() and .forEach() logic). It's good to see the scroll markers appear, console does not return any issues, but I'm not seeing the demo text fade up & down. Sorry for the very basic orientation ... really appreciate any help

Brilliant - Thanks Craig (lightening fast replay - wow!)

Hello, I have 2 CodePen Examples containing a simple tween and scroll. The first example works fine. The Second Example is really similar (the tween is slightly extended), but for some reason the console returns Cannot set property 'ScrollMagic' of undefined. I've been over this a hundred times and can't see where I'm going wrong ... can you help

Oh that is so cool. Thank you for all your help Really appreciate it

Thank you for your help OSUblake - really appreciate it i get where you are coming from with the declaration of p1-p3 get how you are tweening the p2 with attr{} but I'm having trouble adding the next tween (e.g the tween from kf 2 to kf 3) ... do I ad another attr:{},or is this more of a timeline event (e.g how do I create multiple polyline keyframes)

Dear All, Making my first steps in GSAP world and loving it - but now the questions start. I get the concept of animating SVG objects .from .to (loving it), get the principles of Bezier, and understand the potential of morphing - but I’m not sure which is the best way to go about the following ... would appreciate your guidance I’d like to make a simple animation of a line (stroke), I’d like it to go through a number of keyframes - back in the day I’d create a stroke with a number of nodes (illustrated here with red & blue dots) and then animate the following key frames ... KF1 : blue nodes displaced 90 degrees KF2 : blue nodes back in original position KF3 : nodes 5-7 displaced to create the following So how would I bet go about doing this in GSAP - again your feedback would be brilliant Thanks in advance

Thanks for posting

Hi, I'm sold on GSAP .... love it - I'm interested in exploring it in Mobile App Development via PhoneGap but noticing there seems to be little chatter about GSAP in App Dev ... now wondering if I'm missing something really obvious? Am I nuts to think of such a combo? Is there any documentation I should be aware of? any guidelines you can recommend? - would appreciate any pointers. Many thanks

Very happy Tweening Rodrigo, you fix helped me answer another question on including audio player, so now I have audio powered Tweens - In your debt sir !!!

Fantastic - works a treat Really appreciate your help Rodrigo

Hey Rodrigo, thanks for your response I had to put the first pen up in a rush, so didn't have time to set all the includes. please see my NEW CODEPEN here http://codepen.io/gilesht/pen/EyZxLO. This one illustrates what I'm trying to achieve. I was thinking about trying WheelNav's callback functionality. It works to the extent that it will post an alert, but I'm stuck when I try substituting a tween event. At this point however, the only way I can get both GSAP & WheelNav to appear, is to declare GSAP after WheelNav, which is obviously not going to work. I hope this makes of an easier illustration

Dear all, I realise this is a long shot, but I'm hoping it might work ... here's the deal. I'm learning GSAP & Java and loving it. I have the opportunity to present an idea that i'm incubating, with heavy use of GSAP & a navigational type controller (think modern version of "The Golden Compass" ) for a education programme for under privileged kids (educate & have fun at the same time) I've found a controller class that works great as an example, and am first trying to "merge" it with GSAP Control Playback Example (as http://codepen.io/GreenSock/pen/sLavi), with the principle that if I can get that to work, that's good enough for me t build my animations and present the idea. I have successfully combined both examples into a single HTML & .JS file. Both run in their own accord ... I'm now trying to bind (is that the right expression?) the GSAP buttons to the appropriate data-nav objects. The Codepen does not work, but illustrates where I have got to. I have taken id=pauseBtn and am trying to bind it to data-nav-navitemtext='Pause' object. I'm at a point where GSAP still runs, the data-nav still works, but the pauseBtn.onclick fails. I don't know if I'm trying to do the impossible, or if im missing something really obvious. I realise I should really go learn more before I try do this, but if I do I'll miss the opportunity to pitch, and hopefully help some people in need ... so as said ... a long shot, but I'd appreciate any help you can give. Thanks in advance for your time

Hi - pleasure to meet you all. My first post but have been getting to know GS over the past few weeks and love it. However now I'm getting stuck. I've been trying to figure out how to make responsive SVG timelines - i.e. set SVG timeline "keyframes" in % such that (e.g.) left:100% will always be at screen right, regardless of screen size. Worked my way through your trail here (http://greensock.com/forums/tags/forums/responsive/) but I'm missing something. As a newbie I'm finding some of the examples a little too confusing to work out so I've created an example of what i'm trying to understand .... I'd like to substitute the X & Y values in the codepen for % along the lines of tl.to(cssCircle, 1, {left:100%}) .to(cssCircle, 1, {top:100%}) .to(cssCircle, 1, {left:0}) .to(cssCircle, 1, {top:0}); Many thanks