Ultra Design Agency

oh wow- just saw carl's course. That looks like a great place to start.

Thank you- for starters I didnt even know there was a gsap 3. I suppose a good start is going to be installing that in our starter template. I have seen a few paid courses here and there. Is that a useful avenue? If so, which would you recommend?

Wow- what absolutely similar backgrounds we have. I too was a photographer/video person for many years. I too became tired of hucking gear and traveling and moved more into the interactive world in 2008. I am a very adept self promoter and soon began to stack up noted clients and my business grew into a respectable agency. I realized a few years ago that enjoyed being a craftsman much more than a manager. We went to a different business model wherein we scaled back the designers and coders, and I put myself back into design and development. Best decision I ever made, and surprisingly my income improved despite the drop in gross revenues. Fast forward a few years. Like yourself I felt like the sites we were selling weren't candidates for any fancy gsap stuff. - Bullshit. I have always said that if you always give your absolute best, no matter the scope or budget of a project, that you will be greatly rewarded. I need to be drinking the KoolAid. So, like you, I have decided to embark on the journey of learning JS, and ultimately GSAP. I have used various snippets here and there, but only what I have gleaned from the internet. So here is my question to you: What is the path of learning, what are the available tools, and what resources do you recommend I invest time and money into to get where I would like to go? I thank you for any direction you can offer. Perhaps our paths may cross someday! Jay Henry Ultra Design Agency https://ultradesignagency.com/

Zach, I am very grateful for your help. I really would love to learn how to use this tool that we are paying for. I see many online tutorials etc. What would you recommend as a course of action to go from copy/paste to actual developing? I am eager to learn. Jay

Here is my pen using the suggested code- https://codepen.io/ultradesignagency/pen/gObJdya any pointers o what I am missing here?

I tried every possibility with the snippet you provided. I can't make it work. Maybe I am not using it in the correct place. I appreciate your help.

Looping through each accordion. I believe if I can achieve that the rest should work...

I have been googling, codepenning, foruming etc for two days. It's lack of knowledge, not lack of effort.

Is there a tutorial that you might point me to? Or maybe an example somewhere? I image its close, as it is working with just one per page....

Thank you- I wont be able to figure that out. I appreciate your help though.

I think I have been able to offer what you were looking for, and I sincerely thank you for any help you can offer. This pen shows the correct functionality. You can see that it successfully divides each 'li.box' to fill the space designated which in this case is 1000px wide. https://codepen.io/ultradesignagency/pen/mdyYzbJ This pen shows that when a second accordion slider is added to the page the function accounts for all 'li.box' items on the page and not per slider. Thus the widths are wrong and it doesnt not fill the 1000px width of each slider. https://codepen.io/ultradesignagency/pen/gObJdya Thank you so much for your help. Jay

Hello, We have come a long way with GSAP in the last several months however we have come across an issue we cannot seem to solve. We have an issue when we have two instances of our accordion slider on one page. Can you help us resolve this please? The markup looks like this: jQuery(function($){ var active; var boxes = $('.accordion-slider .box').length; var singleBoxWidth = (100 / boxes); var collapsedWidth = singleBoxWidth - ( singleBoxWidth / ( boxes - 1 ) ); var openWidth = 100 - (collapsedWidth * ( boxes - 1 ) ); function accordionSlider() { $('.accordion-slider .box').css('width', 100/boxes + '%' ) $('.accordion-slider .box').on('mouseenter', function(){ if ( !$(this).hasClass('active') && $(window).width() >= 551 ){ //hide active elements if( active ){ TweenLite.to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'}); TweenLite.to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'}); } //introduce new active elements var others = $('.accordion-slider .box').not(this); active = $(this); $(this).addClass('active'); others.removeClass('active'); var tl = new TimelineLite(); tl.to(others, 0.5, {width:collapsedWidth + '%'}, 0) .to(active, 0.5, {width:openWidth + '%'}, 0) .to(active.find('.accordion-slider-title'), 0.9, {opacity:1}, 0.3) .to(active.find('.accordion-slider-content'), 0.9, {opacity:1}, 0.4); } }); $('.accordion-slider .box').on('mouseleave', function(){ if ( $(window).width() >= 551 ){ var all = $('.accordion-slider .box'); var tl = new TimelineLite(); tl.to(all, 0.5, {width: 100/boxes + '%'}, 0) .to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'}, 0) .to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'}, 0) $(this).removeClass('active'); } }); if( $(window).width() < 551 ) { $('.accordion-slider-title, .accordion-slider-content').removeAttr('style'); $('.accordion-slider .box').removeClass('active').css('width', '100%'); } } accordionSlider() $(window).resize(function(){accordionSlider()}); });

I was wondering if you could someone had a solution to keep an initial panel open on page load. Another request would be that the open panel is a bit wider. Any help would be awesome. I am doing the tutorials I promise!

Thank you so much!!!!!!!!!

OK I got this svg to animate successfully, however I cannot seem to trigger it when it enters the viewport. I have tried about everything I can think of! Also, if I want more than one instance do I need a for each? My apologies for the learning curve.

I really appreciate your patience. I know you have written this whole thing for me and that it is not your role. It looks amazing, I really appreciate it. Now I am going to see if I can tackle the 'unobserve' so it plays just once. Wish me luck!

I dont understand this 'If you're going to have a lot of these, you should create the timelines and attach a reference to them on the element itself. That way you can use entry.timeline.play(); or something like that inside of your intersection observer callback.' I promise once I get the gist I will be off and running

Can you point me to a simple example which would trigger the text animation you created for me when in viewport? I feel like this is all far more complicated than I thought it would be.

Very straightforward? Isn't there a simple way to say 'hey, this element is in the viewport so trigger it'?

OK I loaded this on DOMContentLoaded and it is working. Whew! Now, to see if I can figure out how to trigger this when in viewport with ScrollMagic. Any help would be so loved!

I am not sure why this is so complicated for me. Now I get the text animation to work, however it only works when I click the 'replay' button, and not on page load. Ultimately I need these H1 elements to load once they are in the viewport. I am using Magic Scroll. Any direction for a GSAP virgin? http://ultrastarter.wpengine.com/

Hate to bug you again- I am really struggling with putting that simple codepen to work on my webpage. I have called the two scripts, added the functions, and the css. It is not animating whatsoever. Any chance you would be able to help me troubleshoot? https://ultrastarter.wpengine.com/ I can provide access if you need it as well.

One last question- the pen includes 13 scripts. Which ones would I need from that list?

Wow - you did all of this for me? I think we are going to be lifelong friends... Thank you!

yes- it looks like some sort of animated computer lettering- the text says 'More than 200 career options'.