Streaming live at 10am (PST)

Maybe I had an idea worth sharing


#1

I know. Its 9:28PM and I'm writing about future capabilities that Webflow could consider. Are you familiar with GSAP? Since the event Apple not supporting Flash and the shift in industry standards (HTML5, CSS3), website presentations have been thrown back to the dark ages with the limitations that these current standards have. We have gone flat from skewmorphic, not because of trend (good PR there), but because there is no other way to render it cost effectively. The gap between the Designer and Coder has never been so profoundly divided. Webflow in my opinion is a step (leap. I meant leap, like man walking on the moon leap) in bringing closer the technology to the event of art. There will always be a left/right brain separation between artist and coder, and for as fond as the memories are of a green terminal blinking at me like I'm stupid, I rather spend my time directing the art flow rather than the code flow. Sorry, I'm getting verbose here, but essentially what I'm getting to is this. GSAP capabilities for a future Webflow + Animate. Call it Aimateflow.
Maybe I had too much Malbec. smile


#2

I hope I'm hearing you correctly but what works for me is the following 3 things.

I use the script include capabilities of webflow to include:

animate.css
transit.js
custom.js (linked to my VPS server)

I then use my custom.js to target webflow elements and apply css animations and transitions. It's pretty much endless animation capabilities. I have plans (partially built) to create a webflow-like front-end admin tool that will allow for wysiwyg control of building animations. For now, there are a few on the web that a very helpful.


#3

Hey @Jonas76, I think you had just the right amount of Malbec! wine_glass

Coming from a Flash / AS3 background, I am very familiar with GreenSock and similar animation libraries. In fact, webflow.js already includes an open source library: Tram.

Without revealing too much, I will say that we have some exciting plans in progress to give users more control over animations in Webflow. wink

In the meantime, you are welcome to look through the tram examples, and experiment in custom code sections. Here's a starter snippet to animate an element using custom code:

<script>  
var Webflow = Webflow || [];  
Webflow.push(function () {  
  tram('.something')
    .start({ scale: 1.5, color: '#bada55' })
    .then({ scale: 1, color: '' });
});
</script>

-Dan


#4

@pingram3541 Very familiar with animate.css & transit.js. Most my animation at this point use CSS and jQuery, but always resolve to CSS first given the speed, and jQuery when I have to target non-child selectors or multiparent elements (you'll see it soon enough in my portfolio). You are right on the money with the wysiwyg tools for animation building, would like to see what you are up to. Thanks for the links, truly appreciated!

@danro Glad I wasn't "that guy" after a few then! I most certainly will look in to Tram. In which case my rant has not gone unheard and who better than someone with your capabilities. Excited to see whats coming in future.


#5