Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About pmascis

Recent Profile Visitors

259 profile views

pmascis's Achievements


Newbie (1/14)



  1. 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!
  2. 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
  3. 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
  4. 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
  5. Fantastic, much appreciated. Thank you for the explanation as well.
  6. 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!