Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,712 profile views

OneManLaptop's Achievements


Newbie (1/14)



  1. Just a quick addendum to this. Is there any way to use clearProps and have it clear all GSAP traces from each element tweened in a timeline, without having to list every element separately that you want cleared? Thanks.
  2. Hey Carl, as ever thanks so much for looking at the demo and offering your advice. I've spent much of the morning experimenting with your suggestion and my demo and I'm much closer than I was in getting everything in the demo working. However there are still some noticeable issues and on reflection, the demo probably covers issues which perhaps go beyond the scope of what is reasonable to expect from a specialist, volunteer led forum such as this. Therefor I have decided to seek the assistance of somebody who can hold my hand - as it were - a little more and guide me through the logic of what it is I'm trying to achieve, in the hope that I'll develop a better understanding of the concepts and not just the nuts and bolts of working with time lines and functions. Happy to share the eventual results in this thread when ready. Thanks again.
  3. Hello, Green Sock forum. I am having a few struggles which largely revolve around how to call and interact with time lines, which are nested inside a function. I have put together a very bare bones demo up on Codepen, which covers this. The expected functionality is: Click “click to run box”: 1: showContent function is called, which contains and runs the tlContent timeline. 2: onStart calls swapText function, which replaces large text with that contained in the data-text of the clicked nav link. 3: onComplete calls swapText function, which evaluates if tlContent is active, and determining it is not, replaces large text with that contained in the “stopped" variable. Click “click to reverse tween” 1: tlContent time line is reversed. 2: swapText function is immediately called (something akin to an onReverseStart) before any part of the timeline visibly begins to reverse. 3: swapText function is called via onReverseComplete and should display again, the “stopped" variable. So it’s basically a collection of difficulties I’m having, which are largely centred around how to call time lines which by necessity of needing to pass data stored in the clicked element, I’m wrapping inside a function. If there’s a better way to do this then I’m all ears. In addition to this, I have researched the various forum posts which discuss the (completely understandable) lack of a native OnReverseStart call, with some suggesting that the callback can be replicated via the onRepeat call, but as an onRepeat call requires a repeat rate to be set, I couldn’t get the desired functionality in this example. Although I’ll confess to being a bit fuzzy on the specifics of the implementations suggested. As ever, a hearty thank you to anyone who offers their time and insight to help me out.
  4. Echo all that, sadly without being able to deliver a kickass GSAP powered New Years animation. Been a great year for the platform though, I really think the seeds are firmly planted for a lot of growth next year. My continued thanks to all the members and mods who have been so generous with their time in helping us poor mortals out. I hope one day I can pay it back in helping up others. Have a good one!
  5. Hey, has the Codepen for this been deleted? Maybe it's a Codepen limitation / error, but given that this is a community centred around shared learning, it would be helpful if any Codepen's related to the thread were preserved, so that others can reference and learn from them. Thanks.
  6. Thanks for taking the time to look and comment. Anchoring the offSet via an array was definitely the key to fixing it. Excellent, thanks so much, a fixed Pen always helps a lot. So I'm right in saying that by adding the array, you anchored the offset to the correct parent node so it doesn't change on each click, and by using offSetTop rather than jquery.offset.top(); you get the distance relative to the parent rather than the document? Sorry, I've been reading some StackOverflow posts trying to work out the practical differences between our two examples. I know this is a GSAP support forum not a general programming forum, but I really do appreciate the extent and quality of support people like yourself provide. So thanks.
  7. I'm trying to use the scrollTo plugin to navigate around a div, however I'm getting unexpected behaviour, where the links don't seem to correspond to the element I want to scroll to and seem to erratically scroll along the y axis. As the stripped down example shows, the first three content blocks are anchored to the bottom of the container element, with the final content block being anchored to the top of the container. What I am looking to achieve, is to have the content scroll to the relevant relevant anchor, and where the scroll must move from a top to bottom content block, both the x and y axis are animated simultaneously, not an initial scroll along the x axis, and then a scroll along the y axis. Any help appreciated.
  8. Haha, great work, it all links together so smoothly. Really nice.
  9. Cheers Carl, that's certainly fixed it and it's prompted me to brush up on the details of the tween / timeline relationship. Thanks for your fast and thorough help as always.
  10. I'm going to assume I've missed something I'll be blushing for in a few minutes, but I've been banging my head against this and just can't work it out. All I am attempting to do, is call a function via the onRepeat callback when it is applied to a tween in a yoyo repeat state. I've tried numerous variations of the code and can confirm that if I use onComplete, the callback works, and if I use onRepeat on the timeline rather than a tween, then that also works but that's no use to me as I need to call multiple callbacks on separate tweens. I'm sure this is something very simple but for the life of me I can't work it out, if people could check out the codepen and let me know what's wrong, that would be great. http://codepen.io/OneManLaptop/pen/VvJOMQ?editors=001
  11. Thanks very much for that example. It's a great stripped down model that I can dissect and learn from. Thanks for taking the time.
  12. Would Scroll Magic work for you? It may be a bit like going after a bug with a bazooka, but amongst the hundred other things it does, it can pin a page in place and it is best run with GSAP. Might be worth taking a look, although I'm not sure how it handles swiping or touch?
  13. Oh man, my fault, I was calling the function from the onComplete of a staggerTo, hence why things were going a little nuts my end. It's the end of a loooong ass day. Thanks again for all the help from both yourself and the mighty Diaco.AW.
  14. No problem. Just as a quick follow up to the original question, I'm trying to add a callback to the timeline, but it's (of course) being called every time the timeline runs. I actually just need it to perform the callback once, after all the tweens have finished. Is that possible?