rickideeuk
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by rickideeuk
-
-
Hi Jamie and Jonathan
Thanks for your help, it's now working just how I want it
I'm embarrassed about Question 1 though. I know CSS well, but got too caught up in the idea that it was script for the container that was the problem to realise I'd missed html out of my CSS!!!
Thanks again
- 1
-
Hi There
Ive just signed up to Greensock and so far I'm very impressed
I've got a couple of questions that hopefully you can help me with...
I've set up a codepen to show you, with 3 different sized boxes...
See the Pen oshwG by rickideeuk (@rickideeuk) on CodePen
1. Is there a way to make the container 100% height of whatever screen you're viewing the site on? - I've got it to be 100% of the width, but can't seem to make it 100% height?
2. Why on your demo versions have you set a width and height for the .box in the stylesheet, when the actual size of the .box seems to be controlled by 'TweenLite'.
3. Finally is there a way to alter the size of the .box depending on the screen resolution?
e.g. the .box is 500px wide if the screen res is 1000px or above. But changes to 250px wide if the screen is 999px or below???
Many Thanks
Tweening a box on a draggable & ThrowPropsPlugin site...
in GSAP
Posted
Hi there!
Here's a codepen for what I want to achieve, hopefully someone can help me...
See the Pen oshwG by rickideeuk (@rickideeuk) on CodePen
The draggable elements are all working just as I want them, but I want to add a text link in each box that when clicked will make that box move off to the side of the screen, out of the way so that just the top part is showing (like a tab) (see attached pic to see what I mean, box3 text link has been clicked and so the box moved down to the bottom left). This top part is then still draggable back onto the main canvas to dragged/thrown again.
In the JS section of my codepen you can see in the top part of the code that I've tired to make this happen with Box3 by adding this code...
TweenLite.set("#box3", {left:100, top:200});
but if you click on the Box3 text link this just makes the box jump the amount of pixels stated in the code and then it only works once.
So is it possible to make it tween off to the bottom/right of the page, no matter what the size of the screen is AND then if dragged back into the screen make it possible to do again and again???
I hope that all makes sense, many thanks in advance
Rickideeuk