Jump to content


  • Posts

  • Joined

  • Last visited

About pmascis

Recent Profile Visitors

1,888 profile views

pmascis's Achievements

  1. This was just a lazy work around for now, but in my screenshot example, the reCAPTCHA code in the form is what was loading some milliseconds after the document had loaded so 1 second was good enough to wait for it and then fire afterward. I didn't know about delayedCall either, so thank you for that I will give it a go and read about it more in the docs. Thanks again!
  2. Hi Jack, I hope you are well. Thank you for your prompt reply and detailed response, that all makes sense. To get me out of a this quick jam, I just fired it a second later, which is good enough for now. function scrollTriggerRefresh () { ScrollTrigger.refresh(); } setTimeout(scrollTriggerRefresh, 1000); Later on I will work on solutions to refresh at a more specific/appropriate time. Thanks again!
  3. Hi All, I've had this occur a few times now, where something gets added to the DOM and the ScrollTrigger positions are now incorrect/out of alignment. Here is one of the more easy to follow (I hope) examples of where/how this problem exists for me. (Sorry for the lack a codepen and for the lack of of labels in the screenshots, this was taken from a site in production). The white bar at the top (Frequently asked questions etc.) is a navigational anchor bar which gets pinned to the top of the page. It is to stop pinning as soon as it touches the grey footer. I have the ScrollTrigger set up correctly to the point where it works most of the time. However, note that in this screenshot the blue reCAPTCHA box has loaded. Now, once this has loaded, the Scrolltrigger is now in an incorrect position. You can see in the screenshow below, the white bar starts scrolling past the top of the window prematurely, the same height difference as the reCAPTCHA box. I had tried putting my ScrollTriggers in a function that fired on document ready and window.load (even though I'd rather that not be the case), but it doesn't seem to even help. $(document).ready(anchorNavigationBarScrollTriggerCreate); / $(window).on('load', anchorNavigationBarScrollTriggerCreate); Not that it really helps me, but just worth mentioning, once I resize the window ScrollTrigger recalcuates things and the ScrollTrigger is realigned to the correct position as it is now aware of this new DOM element. This is becoming a more frequent problem for me as in other sections of this current website I am pulling in data in the form of an iframe (which is unavoidable), this iframe is quite tall/long too, so all of my nice animations below are all out of whack and really cause some major issues. If anyone can please let me know a possibile solution or let me know if I'm doing something dumb/wrong it would be greatly appreciated, thanks! Paul
  4. Hi Blake, That's pretty much solved it and I can keep working, I'll migrate over to GSAP 3 when I have more time later. I have taken on board and implemented your other notes too. Thank you!
  5. Hi Zach, Thanks for your prompt reply & for the eval information, I read about people discussing it on other posts but at the time wasn't exactly certain if it applied to my case or not, I'll just steer clear as what you have suggested with GSAP 3 sounds like it will work perfectly. I'll just bite the bullet and upgrade to 3.0. The reason I have been hesitant is that I use GSAP along with ScrollMagic as well as NPM/ES6 etc and I have been running into issues migrating thanks to ScrollMagic's current lack of support. In fact, I have been running into the exact console error problems mentioned here where you have already been helping. And my mentality at this point is the same of cTigerDev's to finally drop it and use Intersection Observer instead. When I have some free time I will read through that post in detail as well as other posts and see if I can get things working the way I need. If not I'll hassle you in a new thread on here ;) Thanks again for your help. Cheers,
  6. Hi all! I'm trying to make some animations customizable for the user within the backend of a CMS (need to stay using 2.x for now). I'm having JS reference some HTML5 data-* attributes and have had success so far doing simple things like: let duration = $(this).data('anim-custom-duration'); let xFrom = $(this).data('anim-custom-xfrom'); let xTo = $(this).data('anim-custom-xto'); let yFrom = $(this).data('anim-custom-yfrom'); let yTo = $(this).data('anim-custom-yto'); // Create tween let tween = TweenMax.fromTo($(this), duration, {delay: 0.25, autoAlpha: 0, x: xFrom + 'px', y: yFrom + 'px'}, {autoAlpha: 1, x: xTo + 'px', y: yTo + 'px'}); But I'm now running into a problem where I'm wanting the user to change their animation ease and timing. I am trying to combine ease Types as well as ease Timings into an 'ease' variable that I can ultimately use in my tween. The code/problem is as follows: // Easing let ease; let easeType = 'easeOut'; // $(this).data('anim-custom-ease-type'); // Would normally take from the data attribute, but for ease of reference I've just replaced it with the 'easeOut' option. let easeTiming = 'elastic'; // $(this).data('anim-custom-ease-timing'); // Would normally take from the data attribute, but for ease of reference I've just replaced it with the 'elastic' option. if (easeTiming === 'elastic') { ease = 'Elastic.' + easeType + '.config(1, 0.3)'; } // Would be some other else animation statements here let varNotWorkingReference = 'Elastic.easeOut.config(1, 0.3)'; let varWorkingReference = Elastic.easeOut.config(1, 0.3); alert(ease); alert(varNotWorkingReference); alert(varWorkingReference); // Create tween let tween = TweenMax.fromTo($(this), duration, {delay: 0.25, autoAlpha: 0, x: xFrom + 'px', y: yFrom + 'px'}, {autoAlpha: 1, ease: varWorkingReference, x: xTo + 'px', y: yTo + 'px'}); (In the end within my tween I would obviously want to replace ease: varWorkingReference with ease: ease) So 'ease' and 'varNotWorkingReference' are essentially the same thing, based on my other readings within this forum I assume it's because they are strings, but am unsure about a way around it? Any help would be much appreciated! Sorry for posting a question every few years about variables, I only dig into this stuff every so often Cheers,
  7. Perhaps you are right about writing a function. But the word delimiter is great and might get me out of trouble for now, thanks Carl!
  8. Hi all, I want to do some styling to some headings. Specificially change the last character (which will be a character like . ? ! etc) to a different colour. I have used splitText to break apart every character and have used css to target the last child. However, since these are headings and they will have some weight with SEO, I am concerned with stripping every letter apart and into divs etc. I was wondering if there is some way to tell splitText to only disassemble the last character, or perhaps even target certain characters so I can achieve the style that I want without breaking everything up. Thanks in advance! Paul
  9. Hi Carl, Perfect, thank you! You were quite spot on about what was occuring despite me not giving you much info to work with. After watching that video it makes perfect sense, I didn't know about immediateRender and setting it to false in this scenario has worked. Thanks for all of your other efforts on this message board, I've learnt a tonne from your other posts. Cheers, Paul
  10. Hi all, Sorry for the non descriptive title and incoming scattered question, it's late and not too easy for me to set up a code pen. If it can't easily be answered i.e. it's not something glaringly obvious then don't worry I guess and I'll hack up something else, but anyway... So I have multiple JS files, they are all routed for different things and get compiled into one later (there are no console errors once this is all running). In a home JS file I have something along these lines (there's more to it but these are the key elements) let buttonSearch = $('#header .right .button-search'); let loadAnimationTL = new TimelineMax({paused: true, delay: 0.5}); loadAnimationTL.from(buttonSearch, 0.75, {x: 33, force3D: true, ease: Power3.easeOut, delay: -0.5}) loadAnimationTL.play(); Basically a loading animation for the home page, the problem piece is this Search Button. It's all been fine until now that I've wanted to do another animation with this button. So in another JS file, I have the following. function buttonSearchAppearAnimation(){ // Get names let buttonSearch = $('#header .button-search'); // Animation timeline let buttonSearchAppearTL = new TimelineMax({paused:true}); buttonSearchAppearTL .to(buttonSearch, 0, {zIndex: 3, width: "70px", delay: 0}) .from(buttonSearch, 0.5, {force3D: true, right: "-90px", delay: 0}); return buttonSearchAppearTL; } // Store a reference to the timeline that was created to control it later let buttonSearchAppearAnimationController = buttonSearchAppearAnimation(); And in a click event buttonSearchAppearAnimationController.play(); // Play timeline The problem is that the original first JS animation doesn't work anymore, the second does. My understanding is that the second hasn't been called upon yet (timeline is paused and waits for a click event) so why would it be stopping the first from working? I hope that made sense, thanks for your time anyway, any help would be greatly appreciated as always. Cheers, Paul
  11. Fantastic, much appreciated. Thank you for the explanation as well.
  12. Hi all, This is probably an easy Javascript question. Any help would greatly be appreciated. I'm wanting to use a variable containing a measurement with transform: "translateX( VAR )" but am unsure of the syntax to get it working. Currently, I have: var headerLeft = jQuery('#header .left'); var headerLeftWidth = headerLeft.outerWidth(); And then ideally, I'd like to have something like the following: .to(headerLeft, 1, {transform: "translateX(headerRightWidth)"}); But that as mentioned obviously doesn't work. Console logging the variable works, and to get me out of trouble for the time being I'm using the following which works. .to(headerLeft, 1, {x:headerLeftWidth}); But I'd like to learn the syntax of how to use within the quotes within the transform. Thanks in advance!