pragmatic

I was actually meaning to reply to this earlier. I solved the issue incase anyone else stumbles across this same conundrum. It seems really obvious now but making the element draggable before the tween was all that I needed to do. Here is a snippet from the code: Draggable.create($svg, {type:"scrollLeft", edgeResistance:0.65, bounds:self.$svgWrapper, throwProps:true}); TweenMax.to($svg, 1.5, { scrollTo: {x: (textPosOffset) - 800}, ease: Power4.easeOut }); Hope it helps someone in the future!

Hello all I find myself in a bit of a jam here. I've got an SVG (image of a timeline) that I need to do a couple of things with. First I need to tween to a certain point in the timeline (changes for each new page), now this is fine, I can do that with no issues. However the second part is causing a problem. Since I don't want a nasty horizontal scroll wheel below my image, I've hidden it and added a bit of text to tell the user to drag the timeline to move along it. Only issue is that once the tween is finished, the draggable element is created and the image snaps back to the start of the timeline (x:0). Here is the function: TweenMax.to(self.$svgWrapper, 1.5, { scrollTo: {x: textPosOffset}, ease: Power4.easeOut, onComplete: function() { Draggable.create($svg, {type:"scrollLeft", edgeResistance:0.65, bounds:self.$svgWrapper, throwProps:true}); } }); If anyone could help me solve this issue I would really appreciate it, I just need the image to not snap back to the start. Thanks

well I'll answer this one myself, since I think I figured it out just incase anyone else runs into the problem. this.tl.eventCallback("onReverseComplete", this.handleContinue, null, this); Basically spent more time reading the docs page http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/eventCallback/ When I first tried to play around with this I ommited "null" from my code as I presumed that greensock would guess that if I left that field empty it would default to null anyway but either it does and I messed up my code or it doesn't and I should have included it. Either way problem solved and hopefully this helps someone out in the future.

Hello all I'm trying to call a function that moves to the next page of my project once the user clicks a button. this would be fairly straightforward if it wasn't for the fact that a timeline animation happens first when the user clicks said button. from what I can gather, as things stand "this" is returning a greensock object rather than a jQuery object (I'm kinda new to web development so forgive me if my terminology is a bit all over the place!) I'm trying to bind "this" back to my document so I can call whatever I need to but try as I might I cant seem to find anything in the documentation that is quite what I need. it all starts with this this.listenTo(this.$button, "onClick", this.nextTransition); which then runs this function nextTransition: function () { this.tl.eventCallback("onReverseComplete", this.handleContinue); this.tl.reverse(0); }, however when the next function is run handleContinue: function () { console.log(this); }, I get this in my console s {vars: Object, _totalDuration: 3.95, _duration: 3.95, _delay: 0, _timeScale: 1…} So my question is: How do I set "this" to be what I need it to be? (i.e not the timeline) Hope that all makes sense, I'm still getting my head around all the terminology. Thanks in advance for any assistance you can offer me.

Thanks alot for the advice guys, I'm not a total novice when it comes to using most of the adobe suite (and it's not too hard to find tutorials on youtube etc). It was basically just finding myself bogged down trying to create some viable assets to work with that was causing me the most grief. That last link looks perfect, I've already made a couple of example banners so the code side of things is looking good, now with some good quality assets I can hopefully convince some people to pay me to do it! Thanks again!

Hello all I am trying to learn how to make HMTL5 banners with a view to hopefully earning some money from it in the long term. Obviously to get to that point I need some examples of work to show prospective employers. My design skills are rudimentary at best and I was just wondering if there are any good resources that anyone knows of where you can use assets to practice making banners with. Thanks in advance!