SLSCoder

This may not be specifically GSAP but nobody knows this stuff like you guys. I have a container div on a page that could be anywhere on the page and any size but usually about 400px wide X 500px high. I have another div the same size that will move (animation) into the container. That much is easy. I need the page to be fully visible except for the animation div when it is outside the container div. As the animation div moves into the container div I need the part of the animation div that is inside the container div to be visible but the part of the animation div that is outside the container div to be invisible. I'm looking at css clip and mask but so far I can't figure it out. Is it even possible? I'd really appreciate your help.

That was a great example. I've got it working great now in gsap 3. Thanks!

https://codepen.io/rhernando/pen/vjGxH

Wow! Great code. If I see this right you're not 'fading' anything. You're actually COVERING it with gray. Yes? So, you cover container, make all the motiv divs height 0, then make the motiv[0] height = height * 3 (which I don't understand) and then fade the cover. Then you push the first motiv to the end making the second one the first and do it all again. It seems a bit much but I might be able to make a variation on it work. I'll try. Thanks.

Thanks. I've looked at this. I realize I still wasn't very clear. It appears that barba.js involves ajax and change of actual page urls. All my html is javascript generated on the SAME page. Basically, a function fills a div tag with the page content. When I run the function again, all the content changes. I need to make the div contents 'transition' from the old content to the new content. I have a div: <div id='divContent'></div> I have another div <div id='divTransition'><div> Both are css position:absolute so they can move. I have a <div id='divBackground'></div> which is the 'anchor' and potential image background of the page. The first transition is to be a fade. Basically, the html in divContent fades out, then the html changes and the div fades back in. I feared that the time it takes to fill the content may be noticeable so if needed I could fill divTransition and then do the fade between the 2 divs. I thought this would be easy. So far, I can't do it. The second transition would be the old content slowly moves to the right & off screen while the new content moves right and onto the screen. I haven't tried that one yet.

Thanks. Please realize this code was just for a TEST. The app completely rewrites an entire html page between fades. I'm trying to create a fade page transition. Set and innerText isn't going to work here.

I'm trying to do a simple fade out, fade in. I fade out, change the html then fade back in. I tried using gsap instead of timeline too. It simply doesn't work. What am I missing? Click the word Fade to run it.

Jack: WHAT? I very much appreciate your help. You've lost me here. How can the size of a thing determine its own position? From my understanding, left doesn't have anything to do with the element's container's width, it pertains to the container's left edge. If you code thing.left = container.width that makes sense but thing could be far left of the container if container.left isn't referenced. Can you please explain what you said? I hate to admit I'm a bit confused

Thanks Blake. I don't see the jump. When the Soft & Link end the moves in the straight lines and start following the arcs (2 different tweens) there is a slight jump between the end & start points. The 'numbers' are exactly the same but the browsers see 2 different positions - thus a slight jump. It jumps forward at 1200 pixel width and backward on a cell phone. ??? Yea, doors were randomly appearing in the wrong place, sometimes the big image wasn't the right size . . . it was clearly not executing specific lines in the code - randomly and only if I cleared the cache first. Now the doors don't appear until the big image is downloaded. That seems to have fixed it. I recall you mentioning x & y numerous times but I never really got what you meant. How can I change left & top to x & y?

Thanks Blake. Unless you see something wrong with the animation as it is, I'm done with it I've tested it in 4 different browsers on 2 different computers and 2 different browsers on 2 different cell phones. I've learned that browsers don't do animations and download images simultaneously very well. Sometimes they simply ignore random lines of code. I think I've got it working now. Please let me know if it doesn't look OK. SoftLink

OK, I think it's as close to perfect as I can get it. Here's the latest. If it's messed up when you see it (with a cleared cache) please let me know so I can fix it. SoftLinkSys.com

Thanks for the feedback. I noticed that I had to refresh it on the site to make it work. I thought (hoped) that it was just a caching issue. I'll speed it up as suggested. I've tried easing, delay and other things to smooth it out. It's responsive and I get different results at different screen resolutions. I've tested it in IE 11, Chrome, Firefox & Opera. It's working but only as long as I refresh the screen once. I have to fix that. Any ideas?

After weeks of pestering you guys to help me, I've finally got it. I thought you might like to see what I ended up with. The site's not done but I think the animation is. Let me know if you see any problems. There a few minor jogs and I see things I'd like to fix but . . . softlinksys.com

WOW!! I think I've finally got it! Without you guys, I never would have stood a chance. For my purposes, that would have rendered MorphSVGPlugin near useless to me. Not so!! I can position the svg to html points, html to svg points and svg elements to html points. I updated my codepen. I wanted to use it for reference in the future. Maybe you could use it or fork it and make a better version for other people having problems positioning svg in html. Blake: can I ask a personal question? How did you get that extensive education? Your code is beautiful and your vast knowledge is obvious. Are you a Greensock coder? I can't figure out whether I owe you a bottle or Greensock a donation

You guys have been a tremendous help. I can position the svg in html pretty well now - THANK YOU! I've got 1 small problem still outstanding. Then I'm golden. How can I move an SVG element (not the whole svg) to an HTML coordinate? I've got a codepen above with a sort of practice/demo svg positioning within html. I try it in do6 function. I've tried as much as I can think of. Help??