Jump to content
GreenSock

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

Position elements from center position at an angle

Recommended Posts

Hi there,

 

I'm not an animator by trade, but have been tasked with positioning a series of 7 elements across a "canvas" - in this case a bootstrap container (.blob-container).

 

I've recently worked with GSAP, implementing buttons based on http://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/ and have very limited knowledge of it.

 

From the codepen url below would it be possible to position elements from a center position at an angle with GSAP? As such:

 

post-46853-0-90706800-1473963194_thumb.jpg

 

With a few requirements:

 

- All elements must be keep within the bounds of the container.

- On resize it should readjust if needed

- If space is not enough, all elements should be scaled accordingly

 

I'm not even sure where to begin to be honest, have tried all sorts of examples from the forum and the webs, but neither is positioning elements on an angle.

 

Thank you so much in advance, if anyone could shed some light on where to start that would be great.

 

Cheers,

P.

See the Pen LRNvYk by pnmcosta (@pnmcosta) on CodePen

Link to comment
Share on other sites

Hello pnmcosta and Welcome to the GreenSock Forum!

 

I am not sure what you mean by "position elements from a center position at an angle" ??

 

Are you going to be animating anything? :D

 

It seems that all you need is to position the boxes in the right place to replicate the positioning in your image. Which looks more like a CSS and HTML type of question, then a GSAP API question ;). But GSAP can help you position elements and help with resize scaling but your elements need to be in the right position first.

 

Regarding your first Requirements:

 

- All elements must be keep within the bounds of the container.

 

First you should take the image and make it fit your main container (.blobs). And then add a CSS rule for .blob and add your image as a background image. This way you can use it as a guide to position your boxes in the right place.

 

You can see here how i grabbed your image and made it a background image. I gave each .blob-item a temporary CSS property of opacity this way you can see what !m talking about?

 

Click the toggle background image guide button to help you line up the boxes with CSS:

 

See the Pen ORNGEB by jonathan (@jonathan) on CodePen

 

Then you would adjust each position of every .blob-item so they match the underlying background image positioning. Each box would need to be positioned absolutely .. position: absolute; for each .blob-item using position offsets like top, right, bottom, and left

 

You can learn about layout positioning and the CSS position property here:

https://developer.mozilla.org/en-US/docs/Web/CSS/position

 

Regarding the other 2 Requirements:

 

- On resize it should readjust if needed

- If space is not enough, all elements should be scaled accordingly

 

Once you have them all in the right position then you can move on to having them scaled when resized. But the first thing to do before animating is to always spend the time to position your elements the way you want them, then that makes animating much easier. :)

  • Like 2
Link to comment
Share on other sites

Yes, ideally these would be animated, on load/resize, staggered, from a central position, from/to opacity:1

 

I was hoping GSAP may already have a plugin that would handle a "spider web" like effect, where each blob-item is connected/linked to a main one (centered) and limited by bounds/parent, or there was an example around ;)

 

I understand now that maybe be far-fetched, so I'll do as you suggest, however dealing with the different breakpoints might be an headache!

 

Do you recommend I transform:scale the item's or change their dimensions along top/left?

 

Thank you so much for your help.

 

P.

Link to comment
Share on other sites

I would suggest to always animate with transforms x and y. CSS transforms and opacity will always give you better performance when animating. This way you make sure it animates smooth whereas animating position offsets like top, left, bottom, and right only animate on a pixel level and use the CPU. But x (translateX) and y (translateY) can animate on a sub pixel level and be animated by the GPU. But it's totally fine to first position all your elements with top and left. But animate with transforms.

 

Check out this helpful article by Jack from GreenSock:

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

So you should use scale. Once you have your elements in place you can have GSAP animate those boxes.

 

Do you have an example of that "spider web" like effect? Sounds kind of cool.

Link to comment
Share on other sites

Everything Jonathan said is right on.

To rewind a little, if you want elements to animate out from the center in a staggered fashion, here is a fairly rudimentary approach:

 

var w = window.innerWidth;
var h = window.innerHeight;
var centerX = w/2;
var centerY = h/2;
//place all boxes at a random position within viewport
$(".box").each(function(index, element){
  TweenLite.set(element, {x:Math.random() * w, y:Math.random()*h})
})


//animate from center in staggered fashion
TweenMax.staggerFrom(".box", 1, {autoAlpha:0, x:centerX, y:centerY}, 0.1)

 

http://codepen.io/GreenSock/pen/BLzyoA

 

However, if you want them to never overlap and always fit inside their parent element regardless of how it is resized that can get quite complicated and well beyond what we can just come up with quickly for you. 

  • Like 1
Link to comment
Share on other sites

Hi,

 

Thank you so much, you've all been really helpful :)

 

@Blake, these are great examples, but quick question, what are the attributes r, cx and cy for? From:

 

TweenLite.set(circles, {
  attr: {
    r: 0, 
    cx: "50%", 
    cy: "50%",
  },
  xPercent: -50,
  yPercent: -50
});

Thanks,

P.

Link to comment
Share on other sites

Ah yes. It's because I'm using SVG elements. Those attributes are for a circle. So cx and cy are the x and y coordinates of the center of the circle. So 50% makes it centered. And the r attribute is the radius of the circle.

 

What type of elements are you trying to animate? If they are just images, you could use SVG and it could handle all the scaling for you. If not, all those demos could easily be converted into regular HTML elements. I just used SVG because it required less code. I can convert one of them if needed.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×