Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by ochalmers

  1. I've read through the docs but couldn't find anything relating to this in there. Is it possible for us to trigger functions or other tweens whilst dragging in draggable? For example if you started dragging, the container would tween to an opacity change or the cursor would change whilst you were dragging then change back when you let go. I've attached a pen I have that uses draggable if it's any help to work with. Thanks!
  2. Hey all - if any of you are Spotify please check the homepage today. The Bring Me The horizon Ad that's on there now I built and is powered by GSAP. Shoutouts to Carl and Rodrigo for their help in this thread - http://greensock.com/forums/topic/12206-combining-splittext-and-textplugin/?hl=splittext#entry50402
  3. Hey all, Sorry for another topic (I already have one running - please delete or close this one if we're only allowed one at a time). As you can see on this codepen - http://codepen.io/olichalmers/pen/JYoKzY - i've got a navigation menu with multiple items that I want to apply a splittext hover timeline to. As the demo shows I have it working with separate variable and hover states for each item in the nav, but to me this looks OTT and a bit messy. My question is are we able to integrate an each function to eliminate having to make individual hover states and variables for each nav item? The codepen linked to this topic has it set up but i'm getting errors when trying to fire it locally. Best, Oliver
  4. Hi all, I'm setting up a video gallery for a new project and am harnessing the power of the magnificent draggable plugin. The problem i'm currently facing is how to adapt the layout for various screen sizes. Currently the draggable functions are fired on screen sizes over 700 pixels (all messily contained within an if statement) and the layout is changed via css to adapt when below that pixel size. What i'd love to do is change the draggable functions and dependencies on sizes below 700 px to function vertically instead of the current horizontal layout. The if statement / CSS media query option seems so ugly at the moment. Also - I didn't want to include the throwprops plugin as it's members only - do we have a common source for this to be used on codepen? Cheers!
  5. No worries, glad to be the middle man!
  6. It is definitely worth checking out ScrollMagic as has been mentioned above - it's amazing. Check out this demo they have on their site. http://janpaepke.github.io/ScrollMagic/examples/expert/image_sequence.html
  7. Hello all, I wasn't sure where to put this so i'm just going to leave it here, please move it if it's in the wrong forum! I work as Senior designer at Sony Music UK and we recently launched our new official website that is powered by Greensock. In fact I now use GSAP on every artist website or web application that we build in house. GSAP has truly revolutionised the way we are able to work, so thank you very much and keep up the good stuff! Below are a few of our recent projects using GSAP. Loads more coming before the year is finished too http://sonymusic.co.uk http://alexadairmusic.com http://little-mix.com http://calvinharris.co.uk http://bmthofficial.com
  8. Mine works as I want it to, but damn am I jealous of how streamlined your code is! Love the work guys, thanks for your input.
  9. Thanks so much for your responses Carl and Rodrigo. Both are very clever alternatives. I guess, as Carl stated, if I wanted to control each line through one timeline, i'd have to separate them up into individual divs. Updated pen with my take on things (if a bit messy!) http://codepen.io/olichalmers/pen/doLzpb
  10. Hi all, I'm in the process of making a headline page with typewriter-ey effects and large epilepsy-inducing text replacement. I've managed to use the TextPlugin to great effect for my primary headline (turned off for the purpose of this question in the blockLetters timeline). What i'm struggling to do is combine both the TextPlugin and SplitText to effect as you can see in the timeline that's active (albumLetters). Ideally i'd want the div to be empty on load then I can control the entire thing through GSAP but it doesn't seem to want to change the copy in the fullText div after SplitText has done it's thing. Any ideas?
  11. Thanks so much for your replies guys. Will post an updated pen once I get around to digging into these suggestions.
  12. Hello everyone. After searching through the forums i've found no particular subject related to SVG filter effects. Is there any support for these filter effects within GSAP at the moment? Attached is my codepen where I have set my SVG to have a GaussionBlur with stdDeviation of 0,50. What I want to do is animate or update that number from 0,50 to 0,0. Any ideas / suggestions as to how I might go about doing this in a timeline? Thanks for listening!
  13. You guys rule, those responses were so quick, Thanks for the kind comment too Carl. Firstly - sorry for embedding the plugin, as a member I should have been more aware Secondly - thanks again for the update! Can't believe i'm not using the latest version and the solution was as simple as this. *embarrassed face* Thirdly - GSAP has officially changed my life. It absolutely kills it, thanks so much for creating this wonderful piece of kit. Thanks, Oli
  14. Hi all, The problem i'm having is a what appears to be a browser issue (namely firefox, safari). My codepen attached shows the animation I have working (using the fantastic drawSVG plugin and GSAP) at the end of which the raindrops are supposed to animate in their own timelines repeating. Chrome seems to want to animate it perfectly (why can't everyone just use Chrome!? ) but when in Safari and Firefox the paths don't want to translate position, only opacity. Any suggestions as to a workaround for this? Thanks! Oli [edit] codepen url removed by moderator [/edit]
  15. Thanks for your very speedy reply Rodrigo! That is a lovely example of using a parrallax with tweenmax, so thank you for that The process I am more looking to uncover is how to navigate through a div of content whilst using the dimensions of that window as the directions. As with the example of http://www.jakobdeboer.com/gallery/series/the 4 columns of content obviously overflow horizontally and vertically (with the overflow of the div and body set to hidden as there are no scrollbars) but then you're able to navigate in any which way you want once you hover. I'm assuming you'd integrate GSAP with the mousemove event? Sorry, it's quite difficult to articulate what it is i'm getting at Oliver
  16. Hi all, This is my first time posting on these forums. I'm a regular browser but have yet to post! First off - love Greensock. It has transformed how I go about building and designing websites and applications due to the power of it. It really is awesome! My question today is quite broad, but if possible i'd love somebody to point me in the right direction as to how to complete it. I was wondering what's the best method to use a hover state to navigate around a div, both horizontally and vertically through CSS transforms. Would you have to give the div a strict width and height then navigate around that? The effect I'm looking to replicate is used here - http://www.jakobdeboer.com/gallery/series/ which i've noticed uses tweenmax to scroll through the div. I know this isn't a very specific question, but if somebody could point me in the right direction I'd be very grateful. Thanks, Oliver
  17. Thanks alot Jonathan, this is just what I was looking for. Best, Oliver
  18. ochalmers

    Adding plugins

    Hey guys, Sorry if this has been touched on, i'm sure it has but I couldn't find a topic about it. I am rocking tweenmax, which I must say is incredible. As someone who is pretty decent in JS and has been animating between CSS and JS previously.. it really is a godsend. My question to you good folk, is in regards to adding the various plugins. How do I go about adding, say the CSS plugin to my page / scripts? Do I simply link to it as you would the tweenmax js file? Sorry again, this is a pretty daft question and i'm sure will be easily answered! Thanks Oliver